echarts 散点地图

效果图

数据格式转换

var convertData1 = function(data,index) {
console.log('daft',data)
var res = [];
for (var i = 0; i < data.length; i++) {
	var geoCoordCar = data[i];
	if (geoCoordCar) {
	res.push({
		name: geoCoordCar.pnum,
		value: [geoCoordCar.lon,geoCoordCar.lat],
	});
	}
}
console.log('resgeoCoordCar11',res)
return res;
};

页面渲染

效果可参考echarts 在线链接：https://gallery.echartsjs.com/editor.html?c=xnmZ5X4gCz

    drawMap() {
      var convertData = function(data, index) {
        var res = [];
        for (var i = 0; i < index.length; i++) {
          var geoCoord = data[index[i]];
          if (geoCoord) {
            res.push({
              name: index[i],
              value: geoCoord.concat(index[i])
            });
          }
        }
        return res;
      };
      var convertData1 = function(data,index) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
              var geoCoordCar = data[i];
              if (geoCoordCar) {
                  res.push({
                      carId: geoCoordCar.carid,
                      name: geoCoordCar.pnum,
                      value: [geoCoordCar.lon,geoCoordCar.lat],
                  });
              }
          }
          return res;
      };

      let chart = document.getElementById("myChart");
      let myChart = null;
      if ($echarts.getInstanceByDom(chart)) {
        myChart = $echarts.getInstanceByDom(chart);
      } else {
        myChart = $echarts.init(chart);
      }

      var hStep = 300 / (data.length - 1);
      var busLines = [].concat.apply(
        [],
        data.map(function(busLine, idx) {
          var prevPt;
          var points = [];
          for (var i = 0; i < busLine.length; i += 2) {
            var pt = [busLine[i], busLine[i + 1]];
            if (i > 0) {
              pt = [prevPt[0] + pt[0], prevPt[1] + pt[1]];
            }
            prevPt = pt;
            points.push([pt[0] / 1e4, pt[1] / 1e4]);
          }
          return {
            coords: points,
            lineStyle: {
              normal: {
                color: $echarts.color.modifyHSL(
                  "#5A94DF",
                  Math.round(hStep * idx)
                )
              }
            }
          };
        })
      );
      let option;
      if (this.echarts.indexOf(document.getElementById("myChart")) == -1) {
        this.echarts.push(document.getElementById("myChart"));
      }
      myChart.setOption(
        (option = {
          bmap: {
            center: [116.46, 39.92],
            zoom: 12,
            roam: true,
            mapStyle: {
              styleJson: [], //隐藏地图上的poi
              style: "midnight" //设置地图风格为高端黑
            }
          },
          geo: {
            map: "china",
            itemStyle: {
              normal: {
                areaColor: "#323c48",
                borderColor: "#111"
              },
              emphasis: {
                areaColor: "#2a333d"
              }
            }
          },
          series: [
            {
              name: "已投运",
              type: "scatter",
              coordinateSystem: "bmap",
              data: convertData(this.newData3, this.ids3),
              symbol: "circle",
              symbolSize: 20,
              symbolOffset: ["-20px", "20px"],
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  color: "#F5A623"
                },
                emphasis: {
                  borderColor: "#fff",
                  borderWidth: 1
                }
              }
            },
            {
              name: "规划中",
              type: "scatter",
              coordinateSystem: "bmap",
              data: convertData(this.newData1, this.ids1),
              symbol: "circle",
              symbolSize: 20,
              symbolOffset: ["10px", "-15px"],
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  color: "#E3DDC7 "
                },
                emphasis: {
                  borderColor: "#fff",
                  borderWidth: 1
                }
              }
            },
            {
              name: "建设中",
              type: "scatter",
              coordinateSystem: "bmap",
              data: convertData(this.newData2, this.ids2),
              symbol: "circle",
              symbolSize: 20,
              symbolOffset: ["-20px", "-10px"],
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  color: "#50E3C2 "
                },
                emphasis: {
                  borderColor: "#fff",
                  borderWidth: 1
                }
              }
            },
            {
                  name: 'carInfo',
                  type: 'scatter',
                  coordinateSystem: 'bmap',
                  data: convertData1(this.trajectoryList),
                  symbol:'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',
              
                  symbolSize:[20,20],
                  showEffectOn: 'render',
                  rippleEffect: {
                      brushType: 'stroke'
                  },
                  hoverAnimation: true,
                  label: {
                      normal: {
                          position: [10, 10],
                          formatter: '{b}',
                          position: 'right',
                          show: true
                      }
                  },
                 
                  zlevel: 8
              },
            
          ]
        })
      );
      let that = this;
      myChart.on("click", function(params) {
        if(params.seriesName == 'carInfo'){
          let caridPara = {
            carId: params.data.carId
          };
          that.sigleCarInfo(caridPara);
        }else{
          let data = {
            chargingStationId: params.data.name
          };
          that.chargingstationnDetails(data);
        }
        
      });
    },