echarts-gl组件

ECharts-GL 通俗讲解

echarts-gl = ECharts 官方 3D 扩展插件，基于 WebGL 硬件加速，专门做 3D 立体图表、3D 地球、3D 地图，普通 ECharts 只做 2D 平面图。

3D地球

一、核心作用（大屏最常用 3 个功能）

1. 3D 立体地球（globe）
    
   大屏首页旋转立体地球、全球点位飞线、全球数据分布，必须装 gl 才能实现，原生 echarts 做不了圆球地球。
2. 3D 地图 map3D
    
   立体凸起中国地图、省份区块立起来、城市高度柱状地图，指挥大屏标配。
3. 3D 图表
    
   bar3D柱状、scatter3D散点、line3D折线、surface3D曲面，三轴 XYZ 立体图表，海量数据不卡顿（GPU 加速）。

普通 echarts：Canvas 渲染、2D 平面、大数据卡顿；

 

echarts-gl：WebGL 显卡渲染、3D 立体、百万级数据流畅渲染。

二、安装 & 引入（Vue 项目）

bash

 

运行

# 安装
npm install echarts echarts-gl

js

// main/页面引入
import * as echarts from 'echarts'
import 'echarts-gl' // 只需要引入，自动挂载到echarts实例

三、最简示例：3D 旋转地球

js

const myChart = echarts.init(dom)
myChart.setOption({
  globe:{},
  series:[{
    type:'lines3D',
    effect:{trailWidth:2},
    data:[[[116,39],[121,31]]] //北京→上海飞线
  }]
})

之前写的大屏平面中国地图不用 gl；

想要改成立体凸起 3D 中国地图、圆球全球视图，就要引入 echarts-gl，把type:'map'改成type:'map3D'。