<div id="myChart" :style="{ width: '70vh', height: '70vh' }"></div>
 
import china from "echarts/map/json/china.json";
 
init() {
      var myChart = this.$echarts.init(document.getElementById("myChart"));
      myChart.showLoading();
      var mapName = "china";
      var geoCoordMap = {};
      /* 获取地图数据 */
      var mapFeatures = china.features;
      mapFeatures.forEach(function (v) {
        // 地区名称
        var name = v.properties.name;
        // 地区经纬度
        geoCoordMap[name] = v.properties.center;
      });
      var max = 480,
        min = 9; // todo
      var maxSize4Pin = 100,
        minSize4Pin = 20;
      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
            });
          }
        }
        return res;
      };
      var option = {
        visualMap: {
          show: true,
          min: 0,
          max: 1000,
          left: "left",
          top: "bottom",
          text: ["高", "低"], // 文本，默认为数值文本
          calculable: true,
          seriesIndex: [1],
          inRange: {
            color: ["#00467F", "#A5CC82"], // 蓝绿
          },
        },
        geo: {
          //坐标系为地理坐标系 geo
          show: true,
          map: mapName, //地图加散点
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          roam: true,
          // 设置地图块的相关显示信息
          itemStyle: {
            normal: {
              // 普通状态下的样式
              areaColor: "#d1def3",
              borderColor: "#b4caef",
              borderWidth: 1,
            },
            emphasis: {
              // 高亮状态下的样式
              areaColor: "#9abfff", // hover效果
            },
          },
        },
        series: [
          {
            //新建散点图
            name: "散点",
            type: "scatter", //散点图 scatter
            coordinateSystem: "geo",
            data: this.data1, //定义图表数据内容的数组
            // symbolSize: function (val) {
            //   return val[2] / 10;
            // },
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            // 散点样式
            itemStyle: {
              normal: {
                color: "#F56C6C",
              },
            },
          },
          {
            type: "map",
            map: mapName,
            geoIndex: 0,
            aspectScale: 0.75, // 长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: true,
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff",
                },
              },
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: "#031525",
                borderColor: "#3B5077",
              },
              emphasis: {
                areaColor: "#2B91B7",
              },
            },
            animation: false,
            data: this.data,
          },
          {
            name: "点",
            type: "scatter",
            coordinateSystem: "geo",
            symbol: "pin", // 气泡
            symbolSize: function (val) {
              var a = (maxSize4Pin - minSize4Pin) / (max - min);
              var b = minSize4Pin - a * min;
              b = maxSize4Pin - a * max;
              return a * val[2] + b;
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#fff",
                  fontSize: 9,
                },
                formatter: "{@[2]}",
              },
            },
            itemStyle: {
              normal: {
                color: "#F62157", // 标志颜色
              },
            },
            zlevel: 6,
            data: convertData(this.data),
          },
          {
            name: "Top 5",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: convertData(
              this.data
                .sort(function (a, b) {
                  return b.value - a.value;
                })
                .slice(0, 5)
            ),
            symbolSize: function (val) {
              return val[2] / 10;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: "yellow",
                shadowBlur: 10,
                shadowColor: "yellow",
              },
            },
            zlevel: 1,
          },
        ],
      };
      myChart.setOption(option);
      myChart.hideLoading();
    },