介绍本系列文章配套代码获取有以下两种途径：
-
通过百度网盘获取：
链接：https://pan.baidu.com/s/1W26KrZK7RjwgxvulccTA9w?pwd=mnsj提取码：mnsj
-
前往GitHub获取：
https://github.com/returu/Data_Visualization在ECharts中绘制三维图表，需要使用到ECharts GL（基于ECharts的WebGL扩展，用于在Web应用程序中创建交互式、可视化的3D图表和地图）。
ECharts GL提供了许多常见的3D图表类型，包括3D散点图、3D柱状图、3D曲面图等。它还支持自定义3D图表，让开发者可以根据自己的需求创建独特的3D图表。ECharts GL还提供了地图渲染功能，可以呈现全球、国家和省份等不同级别的地图数据。它支持多种地图投影方式，包括球形投影和平面投影，可以满足不同场景的需求。ECharts GL还提供了丰富的交互式功能，包括拖拽、缩放、旋转等操作，可以方便用户对图表和地图进行操作和浏览。ECharts GL提供了大量可视化组件，为了不增加ECharts的体积，可以将其作为扩展的方式引入。
可以前往以下官方GitHUB页面下载echarts-gl.js脚本文件。
1https://github.com/ecomfe/echarts-gl/tree/master/dist
下载完成后正常引入即可：
1 <!-- 引入下载的 echarts-gl.js 文件 -->
2 <script type="text/javascript" src="js/echarts-gl.js"></script>
本次以三维散点图为例，绘制三维图表与二维图表不同之处主要有：
-
data数据必须是三维的；
-
需要使用到三维笛卡尔坐标系组件grid3D；
-
series中type参数为scatter3D、bar3D等这些表示三维图表的参数值。
1 // 设置图表的参数
2 var option = {
3 title: {
4 text: "三维散点图"
5 },
6
7 legend: {},
8
9 xAxis3D: {}, // 三维笛卡尔坐标系中的 x 轴
10 yAxis3D: {}, // 三维笛卡尔坐标系中的 y 轴
11 zAxis3D: {}, // 三维笛卡尔坐标系中的 z 轴
12
13 // 三维笛卡尔坐标系组件。
14 // 需要和 xAxis3D，yAxis3D，zAxis3D 三个坐标轴组件一起使用。
15 grid3D:{
16 // viewControl用于鼠标的旋转，缩放等视角控制
17 viewControl:{
18 beta:50 // 视角绕 y 轴，即左右旋转的角度
19 },
20 boxWidth:80, // 三维笛卡尔坐标系在三维场景中的宽度
21 boxHeight:80, // 三维笛卡尔坐标系在三维场景中的高度
22 boxDepth:80, // 三维笛卡尔坐标系在三维场景中的深度
23 top:'middle' // 组件的视图离容器上侧的距离
24 },
25
26 // 数据系列
27 series: [{
28 name: "类别1",
29 type: "scatter3D", // 三维散点图
30 symbol: "circle", // 标记的图形,默认为circle
31 symbolSize: 15,
32 data: [
33 [12, 7, 50 ],
34 [2, 4, 25 ],
35 [1, 3, 20 ],
36 [4, 5, 20 ],
37 [6, 7, 35 ],
38 [12, 6, 36 ],
39 [12, 8, 38 ],
40 [5, 5, 44 ]
41 ]
42 },{
43 name: "类别2",
44 type: "scatter3D", // 三维散点图
45 symbol: "diamond", // 标记的图形
46 symbolSize: 15, // 标记的大小
47 data: [
48 [10, 9, 20 ],
49 [8, 8, 30 ],
50 [5, 7, 40 ],
51 [11, 8, 25 ],
52 [14, 7, 24 ],
53 ],
54 itemStyle:{
55 color:"red"
56 }
57 }],
58 };
可视化结果如下图所示（通过鼠标可以实现图表的旋转、缩放等操作）：
更多关于ECharts GL的参数和配置可以查看官方文档：
1https://echarts.apache.org/zh/option-gl.html#globe
本篇文章来源于微信公众号: 码农设计师
