vue中使用Mapbox+Echartsgl进行可视化

1，安装echarts和echartsgl

cnpm i echarts echarts-gl -S

然后在main.js中引入：

//引入echarts
import echarts from 'echarts'
import 'echarts-gl'
Vue.prototype.$echarts = echarts

 2,引入mapboxgl

在public/index.html中引入

3，代码

其中source_wheatNum2017的格式如下：

4，效果图

如果想要展示线状3D图，将上面的series改为以下代码即可：

注意，data数据多了个中括号[ ]

 series: [
          {
            type: "lines3D",
            coordinateSystem: "mapbox",
            effect: {
              show: true,
              constantSpeed: 10,
              trailWidth: 8,
              trailLength: 10,
              trailOpacity: 1,
              spotIntensity: 2
            },
            blendMode: "lighter",
            polyline: true,
            lineStyle: {
              width: 0.1,
              color: "rgb(200, 40, 0)",
              opacity: 0
            },

            data: [
              [[104.065735, 30.659462, 165602], [104.773447, 29.352765, 3914]]
            ]
          }
        ]

效果图：