高德地图api+echarts-extension-amap

示例代码：

let option = {
      //amap地图配置
       amap: {
           center: [108.93425, 37.83053],
           zoom: 5,
           zooms: [5, 18],
           roam: true,
           isHotspot: true,
           echartsLayerZIndex: 2019,
           doubleClickZoom: false,
           resizeEnable: true,
           showLabel: false,
       },
       animation: true,
       series: [{
               name: "",
               type: "scatter",
               // 使用高德地图坐标系
               coordinateSystem: "amap",
               data: [
                   ['108.946665', '34.293109'],
                   ['121.378115', '30.997271'],
                   ['113.504234', '23.155155'],
               ],
               zlevel: 10, // 相当于z-index
               symbolSize: [56, 56],
               symbol: 'image: //./css/images/xxx.png'
           }, {
               name: "",
               type: "effectScatter",
               coordinateSystem: "amap",
               data: [{
                   name: '上海',
                   value: [121.47, 31.23],
                   color: '#ff445f'
               },
               {
                   name: '重庆',
                   value: [106.55, 29.56],
                   color: '#01c1b2'
               },
               {
                   name: '新疆',
                   value: [87.63, 43.79],
                   color: '#8272ec'
               }],
               symbolSize: 8,
               showEffectOn: "render",
               rippleEffect: {
                   scale: 5,
                   brushType: "stroke",
               },
               hoverAnimation: true,
               label: {
                   normal: {
                       formatter: "{b}",
                       position: "right",
                       show: true,
                       fontSize: 18,
                       fontWeight: 600
                   },
                   emphasis: {
                       show: true,
                   },
               },
               itemStyle: {
                   normal: {
                       color: function (param) {
                           return param.data.color
                       },
                       shadowBlur: 20,
                       shadowColor: "#000",
                   },
               },
           },
           {
               type: "lines", // 该类型用于地图上路线的绘制
               coordinateSystem: "amap", // 该系列使用的坐标系是高德地图的坐标系
               zlevel: 1, // 相当于z-index
               effect: {
                   // 线特效的配置
                   show: true, // 是否显示特效
                   period: 5, // 特效动画的时间
                   trailLength: 0.5, // 特效尾迹的长度 0-1
                   // color: "#fff", // 特效的颜色
                   symbolSize: 7, // 特效的大小
                   normal: {
                       color: function (param) {
                           return param.data.color
                       },
                   }
               },
               lineStyle: {
                   // 线的颜色
                   normal: {
                       color: function (param) {
                           return param.data.color
                       },
                       width: 1.5,
                       curveness: 0.2,
                   },
               },
               data: [{
                   coords: [
                       [116.496437, 39.913523],
                       [121.47, 31.23],
                   ],
                   color: '#ff445f'
               },
               {
                   coords: [
                       [116.496437, 39.913523],
                       [106.55, 29.56],
                   ],
                   color: '#01c1b2'
               },
               {
                   coords: [
                       [116.496437, 39.913523],
                       [87.63, 43.79],
                   ],
                   color: '#8272ec'
               }],
           }
       ],
   };
   let mapChart = echarts.init(document.getElementById("aMap"));
   mapChart.setOption(option);
   // 获取 ECharts 高德地图组件
   var amapComponent = mapChart.getModel().getComponent('amap');
   var amap = amapComponent.getAMap();
   amap.on("zoomchange", () => {
       // 地图缩放事件
   })
   amapComponent.setEChartsLayerInteractive(false);