使用 ECharts GL 实现基础的三维可视化

更多关于Apache ECharts的文档，请阅读:

• Apache ECharts文档专题

---

《Apache ECharts教程》

• 5 分钟上手 ECharts
• ECharts 5 新特性
• ECharts 5 升级指南
• 在打包环境中使用 ECharts
• ECharts 基础概念概览
• 个性化图表的样式
• ECharts 中的样式简介
• 异步数据加载和更新
• 使用 dataset 管理数据
• 使用 transform 进行数据转换第一部分
• 使用 transform 进行数据转换第二部分
• 在图表中加入交互组件
• 移动端自适应
• 数据的视觉映射
• ECharts 中的事件和行为
• 动态排序柱状图
• 小例子：自己实现拖拽
• 小例子：实现日历图
• 旭日图
• 自定义系列
• 富文本标签
• 服务端渲染
• 使用 Canvas 或者 SVG 渲染
• 地理坐标系和地图系列的 SVG 底图
• 在图表中支持无障碍访问
• 使用 ECharts GL 实现基础的三维可视化
• 在微信小程序中使用 ECharts

---

ECharts GL （后面统一简称 GL）为 Apache EChartsTM 补充了丰富的三维可视化组件，这篇文章我们会简单介绍如何基于 GL 实现一些常见的三维可视化作品。实际上如果你对 ECharts 有一定了解的话，也可以很快的上手 GL，GL 的配置项完全是按照 ECharts 的标准和上手难度来设计的。

在看完文章之后，你可以前往 官方示例 和 Gallery 去了解更多使用 GL 制作的示例，对于文章中我们没法解释到的代码，也可以前往 GL 配置项手册 查看具体的配置项使用方法。

如何下载和引入 ECharts GL

为了不再增加已经很大了的 ECharts 完整版的体积，我们将 GL 作为扩展包的形式提供，和诸如水球图这样的扩展类似，如果要使用 GL 里的各种组件，只需要在引入echarts.min.js的基础上再引入一个echarts-gl.min.js。你可以从 官网 下载最新版的 GL，然后在页面中通过标签引入：

<script src="lib/echarts.min.js"></script>
<script src="lib/echarts-gl.min.js"></script>

如果你的项目使用 webpack 或者 rollup 来打包代码的话，也可以通过 npm 安装后引入

npm install echarts
npm install echarts-gl
// 通过 ES6 的 import 语法引入 ECharts 和 ECharts GL
import echarts from 'echarts';
import 'echarts-gl';

声明一个基础的三维笛卡尔坐标系

引入 ECharts 和 ECharts GL 后，我们先来声明一个基础的三维笛卡尔坐标系用于绘制三维的散点图，柱状图，曲面图等常见的统计图。

在 ECharts 中我们有 grid 组件用于提供一个矩形的区域放置一个二维的笛卡尔坐标系，以及笛卡尔坐标系上上的 x 轴（xAxis）和 y 轴（yAxis）。对于三维的笛卡尔坐标系，我们在 GL 中提供了 grid3D 组件用于划分一块三维的笛卡尔空间，以及放置在这个 grid3D 上的 xAxis3D, yAxis3D, zAxis3D。

小提示：在 GL 中我们对除了 globe 之外所有的三维组件和系列都加了 3D 的后缀用以区分，例如三维的散点图就是 scatter3D，三维的地图就是 map3D 等等。

下面这段代码就声明了一个最简单的三维笛卡尔坐标系

var option = {
   
    // 需要注意的是我们不能跟 grid 一样省略 grid3D
    grid3D: {
   },
    // 默认情况下, x, y, z 分别是从 0 到 1 的数值轴
    xAxis3D: {
   },
    yAxis3D: {
   },
    zAxis3D: {
   }
}

效果如下：

跟二维的笛卡尔坐标系一样，每个轴都会有多种类型，默认是数值轴，如果需要是类目轴的话，简单的设置为 type: 'category’就行了。

绘制三维的散点图

声明好笛卡尔坐标系后，我们先试试用一份程序生成的正态分布数据在这个三维的笛卡尔坐标系中画散点图。

下面这段是生成正态分布数据的代码，你可以先不用关心这段代码是怎么工作的，只需要知道它生成了一份三维的正态分布数据放在data数组中。

function makeGaussian(amplitude, x0, y0, sigmaX, sigmaY) {
   
    return function (amplitude, x0, y0