echarts 3d

ECharts 3D 图表使用教程
创建基本环境
为了构建 ECharts 3D 图表，首先需要引入必要的 JavaScript 文件。除了标准的 echarts.min.js 外，还需加载 WebGL 扩展包 echarts-gl.min.js 来启用 3D 功能[^3]。
<script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl@latest/dist/echarts-gl.min.js"></script>
登录后复制
初始化图表实例
初始化一个 ECharts 实例对象用于承载 3D 地图或其他类型的 3D 图形：
var myChart = echarts.init(document.getElementById('main'));
登录后复制
配置项设置
配置项是定义图表外观和行为的核心部分。对于 3D 图表来说，重要的是指定合适的 series 类型（如 bar3D, line3D 或 scatter3D），并调整视角参数 viewControl 提供更好的视觉体验[^4]。
option = {
backgroundColor: '#fff',

visualMap: {
show: false,
min: 0,
max: 1000,
inRange: {
color: ['#313695', '#4575b4', '#74add1']
}
},

xAxis3D: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
name: 'X Axis'
},

yAxis3D: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
name: 'Y Axis'
},

zAxis3D: {
type: 'value',
name: 'Z Axis'
},

grid3D: {
boxWidth: 200,
boxDepth: 80,

light: {
main: {
intensity: 1.2,
shadow: true
},
ambient: {
intensity: 0.3
}
},

viewControl: { // 视角控制选项
projection: 'orthographic' // 正交投影模式
}
},

series: [{
type: 'bar3D',
data: [
[0, 0, Math.random() * 50],
...
].map(function (item) {
return {
value: item
};
}),
shading: 'lambert',
label: {
show: false
},
emphasis: {
label: {
textStyle: {
fontSize: 20,
color: '#900'
}
},
itemStyle: {
color: '#900'
}
}
}]
};
myChart.setOption(option);
登录后复制
此段代码展示了如何创建一个简单的柱状图形式的 3D 数据展示，并设置了光照效果、阴影渲染以及交互式的高亮显示等功能。