echarts中的地圖使用

關於在地圖上標記顯示

效果圖

 

 點擊高亮

 

代碼配置說明

 async getCentralLocation() {  //數據請求接口,並進行數據格式化
      if (this.url) {
        let geoCoordMap = {},
          data = [];
        let locations = await window.axios.get(this.url);
        if (locations.status === 200 && locations.data.data.length !== 0) {
          for (let item of locations.data.data) {
            geoCoordMap[item.cname] = [item.lon, item.lat];
            data.push({
              name: item.cname,
              value: item.total,
            });
          }
        }
        this.location = { geoCoordMap, data };
      }
    },

    convertData() {  //地圖標記數據處理
      let geoCoordMap = {};
      let data = [];
      if (this.url) {
        geoCoordMap = this.location.geoCoordMap;
        data = this.location.data;
      }
      data.sort((a, b) => b.value - a.value);
      let res = [];
      for (let i = 0; i < data.length; i++) {
        let geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
          });
        }
      }
      return res;
    },

    // 返回地圖配置項
    getMapOption() {
      return {
        tooltip: {
          trigger: "item",
        },
        bmap: {
          center: this.center,
          zoom: this.zoom,
          roam: true,
          mapStyle: {
            styleJson: [
              {
                featureType: "water",
                elementType: "all",
                stylers: {
                  color: this.waterColor,
                },
              },
              {
                featureType: "land",
                elementType: "geometry",
                stylers: {
                  color: this.landColor,
                },
              },
              {
                featureType: "highway",
                elementType: "all",
                stylers: {
                  color: this.highwayColor,
                },
              },
              {
                featureType: "arterial",
                elementType: "geometry.fill",
                stylers: {
                  color: this.arterialFillColor,
                },
              },
              {
                featureType: "arterial",
                elementType: "geometry.stroke",
                stylers: {
                  color: this.arterialStrokeColor,
                },
              },
              {
                featureType: "local",
                elementType: "geometry",
                stylers: {
                  color: this.localColor,
                },
              },
              {
                featureType: "railway",
                elementType: "geometry.fill",
                stylers: {
                  color: this.railwayFillColor,
                },
              },
              {
                featureType: "railway",
                elementType: "geometry.stroke",
                stylers: {
                  color: this.railwayStrokeColor,
                },
              },
              {
                featureType: "subway",
                elementType: "geometry",
                stylers: {
                  lightness: -70,
                },
              },
              {
                featureType: "building",
                elementType: "geometry.fill",
                stylers: {
                  color: this.buildingFillColor,
                },
              },
              {
                featureType: "all",
                elementType: "labels.text.fill",
                stylers: {
                  color: this.labelTextFillColor,
                },
              },
              {
                featureType: "all",
                elementType: "labels.text.stroke",
                stylers: {
                  color: this.labelTextStrokeColor,
                },
              },
              {
                featureType: "building",
                elementType: "geometry",
                stylers: {
                  color: this.buildingColor,
                },
              },
              {
                featureType: "green",
                elementType: "geometry",
                stylers: {
                  color: this.greenColor,
                },
              },
              {
                featureType: "boundary",
                elementType: "all",
                stylers: {
                  color: this.boundaryColor,
                },
              },
              {
                featureType: "manmade",
                elementType: "all",
                stylers: {
                  color: this.manmadeColor,
                },
              },
              {
                featureType: "label",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
            ],
          },
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "bmap",
            data: this.url ? this.convertData() : [], //數據接口
            encode: {
              value: 2,
            },
            symbolSize: function (val) {
              return val[2].toString().length * 15;  //動態設置標記點的大小
            },
            showEffectOn: "emphasis",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            label: {  //圖標上標簽設置，默認顯示value值，
              color: this.labelTextColor,
              show: this.showLabel == 1 ? true : false,
              fontSize: "10",
            },
            itemStyle: { //圖標設置
              color: this.labelColor,
              borderColor: this.labelBorderColor,
              shadowBlur: 20,
              shadowColor: "#fff",
            },
            emphasis: {  //高亮設置
              label: {
                show: true,
                color: "#fff",
                fontSize: "14",
                fontWeight: "bold",
              },
              itemStyle: {
                color: "#ff0000",
                borderColor: "#33903",
                borderWidth: 2,
              },
            },
            zlevel: 1,
          },
        ],
      };
    },

    initChart(mapJson) {
      this.chart = echarts.init(this.$refs.map);
    },
  },