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);
    },
  },