echarts立体双柱3d

ECharts 实现立体双柱3D图表
ECharts 提供了强大的功能来创建各种类型的可视化图形，其中包括三维柱状图。为了实现一个具有两个系列数据的立体双柱3D图表，可以按照如下方式配置：
初始化 ECharts 实例并设置基本选项
首先，在HTML页面中引入必要的库文件，并初始化ECharts实例。
<!-- 引入 echarts 文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
</script>
登录后复制
接着定义图表的基础配置项，包括视角调整、坐标轴样式以及网格布局等参数[^1]。
option = {
backgroundColor: '#fff',

visualMap: {
show: false,
min: 0,
max: 80,
inRange: {
color: ['#d7eaf9', '#2c5aa5']
}
},

xAxis3D: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
axisLabel: {inside: true}
},

yAxis3D: {
type: 'value'
},

zAxis3D: {
type: 'value'
},

grid3D: {
boxWidth: 200,
boxDepth: 80,

viewControl: {
// 自动旋转
autoRotate: true
},

light: {
main: {
intensity: 1.2
},
ambient: {
intensity: 0.3
}
}
}
};
登录后复制
添加多个系列的数据源
通过series属性指定不同组别的数值集合，这里展示如何构建两列独立但相邻显示于同一X轴上的条形群集效果[^2]。
var seriesDataA = [
[0, 10], [1, 20], [2, 30],
[3, 40], [4, 50]
];

var seriesDataB = [
[0, 15], [1, 25], [2, 35],
[3, 45], [4, 55]
];

option.series = [{
name: 'Series A',
type: 'bar3D',
data: seriesDataA.map(function (item) {
return {
value: item.concat([Math.random() * 10 + 5])
};
}),
shading: 'lambert'
}, {
name: 'Series B',
type: 'bar3D',
data: seriesDataB.map(function (item) {
return {
value: item.concat([Math.random() * 10 + 5])
};
}),
shading: 'lambert'
}];
登录后复制
最后调用 setOption() 方法应用上述所有的设定到实际渲染出来的图表上[^3]。
myChart.setOption(option);
登录后复制
这样就完成了一个简单的带有阴影效果和平滑表面材质质感（Lambert光照模型）的立体双柱3D图表制作过程。