简介
Echarts 是一个基于 JavaScript 的开源数据可视化库, 旨在提供直观、生动、可交互、可个性化定制的数据可视化图表。而 echarts-gl 是 echarts 的一个扩展，主要是针对大数据量的 3D 数据展示，它集合了 echarts + webGL 技术。本文主要介绍 echarts-gl 的使用方法与注意事项，以及示例代码的讲解。
安装 echarts-gl
在使用 echarts-gl 之前，需要先安装 echarts。如果未安装 echarts，则需要先安装：
npm install echarts --save
接着，再安装 echarts-gl：
npm install echarts-gl --save
安装完成后，可以在项目中引入 echarts-gl：
import echarts from 'echarts'; import 'echarts-gl';
echarts-gl 的基本使用
先贴上一个简单的 echarts-gl 使用示例：
-- -------------------- ---- -------
----- ------ - -
------ -
------------ -------
-------------- -------
------------------ --
-------- ----------
------------ ------------------------------------------------------------------------------------
------ -
-------- -
---------- ----
--
----- -
---------- ----
------- -----
--
--
--
------- --
----- ----------
----------------- --------
----- ------
------- -
----- -----
----------- --
------------ ----
------------- --
----------- --------- -- ----
--
---------- -
------ --
------ ---------- ---- --- ------
--
---------- ----------
---
--
----------------------------------------------------------------可以看到，echarts-gl 的使用与 echarts 基本类似。核心在于 echarts-gl 的系列类型（seriesType）与坐标系（coordinateSystem）。
在 echarts-gl 中，下面这些坐标系支持 3D 视觉：
- globe，
- mapbox3D，
- map3D，
- surface。
接下来，我们会以 globe 作为主要的示例来展示其详细的使用方法。
globe 球形图
globe 球形图是 echarts-gl 中最常用的 3D 坐标系之一，它支持平面坐标系（geo）和像素坐标系（none）数据源。下面是一个 globe 球形图的示例：
-- -------------------- ---- -------
----- ------ - -
------ -
------------ -------
-------------- -------
------------------ --
-------- ----------
------------ ------------------------------------------------------------------------------------
------ -
-------- -
---------- ----
--
----- -
---------- ----
------- -----
--
--
--
------- --
----- ----------
----------------- --------
----- ------
------- -
----- -----
----------- --
------------ ----
------------- --
----------- --------- -- ----
--
---------- -
------ --
------ ---------- ---- --- ------
--
---------- ----------
---
--
----------------------------------------------------------------上面的代码中，我们设置了球形图的一些基础信息，如：底图（baseTexture），高端纹理（heightTexture）、位移比例（displacementScale）、渲染模式（shading）、环境变量（environment）、光照属性（light）等等。
接着，我们通过 series 中的数据属性来添加展示的数据，此处是添加了 lines3D 类型的数据。
globe 球形图展示效果优化
在 echarts-gl 中，globe 的展示效果需要经过优化处理，否则可能存在跳动、卡顿等问题。下面介绍几种提升展示效果的方法：
数据优化
数据数量过大：在实际的场景中，可能存在数以万计的坐标点需要展示。此时，可以考虑对多个点进行合并，避免数据过大造成页面的卡顿。
animation 和 effect ，特别是纹理 effect，影响整个页面的帧率，数据量再大就会出现卡顿。
避免反复计算
坐标系数据来源的更改会刷新整个坐标系，性能开销巨大，体现为卡顿或黑屏。
谨慎使用带留尾效果的动画（类似流星、拖尾等），反复重绘图形。
合理配置
单下钻时，避免使用处于全局坐标系的“pillars”系列。
定制符号大小系数系要适中，使用过大则会导致图案重叠，消耗大量性能。
坐标系默认自适应画布，一些配置可能对自适应有影响，需要细心。
结语
通过本篇文章的介绍，相信大家对 echarts-gl 的使用、展示效果优化有了进一步的了解。在实际的应用中，需要根据自身项目的需求和数据特点，灵活调整展示的方式和效果来达到更优的结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedabd1b5cbfe1ea0610887