echart 三维可视化地图_使用 ECharts GL 实现三维可视化 - 入门款

(题图是使用 ECharts GL 渲染的纽约市建筑群)

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

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

如何下载和引入 ECharts GL

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

如果你的项目使用 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 等等。

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

let option = {

// 需要注意的是我们不能跟 grid 一样省略 grid3D grid3D: {},

// 默认情况下, x, y, z 分别是从 0 到 1 的数值轴 xAxis3D: {},

yAxis3D: {},

zAxis3D: {}

}

效果如下：

跟二维的笛卡尔坐标系一样，每个轴都会有多种类型，默认是数值轴，如果需要是类目轴的话，简单的