e-charts地图+散点图分别实现分级显示

e-charts地图分级显示，散点图也分级显示；官网上只有单独的散点图分级显示或者单独的地图分级显示，这里我们把两者联系起来，通过geo坐标系配置项；

效果图：

上代码：

配置项：

echartsOption：
{
    title: {
      text: "",
      subtext: "",
      sublink: "",
    },
    //地图图例
    visualMap: {
      type: "piecewise",
      right: 0,
      backgroundColor: "",
      align: "left",
      padding: [5, 40, 5, 5],
      pieces: [
        { min: 50, color: "#1a8aec" },
        { min: 40, max: 49, color: "#3ea1f8" },
        { min: 30, max: 39, color: "#52b3ff" },
        { min: 20, max: 29, color: "#7cc5ff" },
        { min: 10, max: 19, color: "#c3ebff" },
        { min: 0, max: 9, label: "0-9", color: "#bbdefd" }, //label自定义文字
      ],
    },
    //地理坐标系
    geo: {
      tooltip: {
        show: true,
      },
      map: "HK", //参考地图,HK不是固定值，是通过echarts.registerMap设置的地图名称，后面代码里会有
      roam: true,
      zoom: 1.2,
      //控制地图字体的样式
      label: {
        show: true,
        color: "#000000",
        fontWeight: 400,
        fontSize: 24,
        shadowBlur: 24,
        textBorderColor: "#ffffff",
        textBorderWidth: 5,
        textBorderType: "solid",
      },
    },
    series: [
      //地图
      {
        name: "广东省任务情况",
        type: "map",
        coordinateSystem: "geo", //参考坐标系,坐标系里有地图
        geoIndex: 0,
        label: {
          show: true,
          position: "inside",
          formatter: function (val) {
            return val.name;
          },
        },
        data: [],
      },
      //散点
      {
        name: "广东省任务情况",
        type: "scatter",
        coordinateSystem: "geo",
        geoIndex: 0,
        data: [],
        symbolSize: function (val) {
          if (val[2] <= 30) {
            return 30;
          } else if (val[2] > 70) {
            return 70;
          } else {
            return val[2];
          }
        },
        label: {
          formatter: function (val) {
            return val.value[2];
          },
          position: "inside",
          show: true,
          color: "#1a8aec",
          fontWeight: "bolder",
          fontSize: 16,
        },
        emphasis: {
          label: {
            show: true,
          },
        },
        itemStyle: {
          color: "#ffffff",
          opacity: 1,
          borderWidth: 6,
          borderType: "solid",
          borderColor: "#1a8aec99",
        },
      },
    ],
  },

数据：

行政区数据GeoJson格式

这里Json的代码不好上传给个网址吧

https://geo.datav.aliyun.com/areas_v3/bound/440000_full.json

数值数据和散点坐标数据

      //数据
      taskData: [
        { name: "广州市", value: 46 },
        { name: "韶关市", value: 47 },
        { name: "深圳市", value: 24 },
        { name: "珠海市", value: 37 },
        { name: "汕头市", value: 23 },
        { name: "佛山市", value: 55 },
        { name: "江门市", value: 14 },
        { name: "湛江市", value: 14 },
        { name: "茂名市", value: 30 },
        { name: "肇庆市", value: 32 },
        { name: "惠州市", value: 49 },
        { name: "梅州市", value: 35 },
        { name: "汕尾市", value: 3 },
        { name: "河源市", value: 5 },
        { name: "阳江市", value: 14 },
        { name: "清远市", value: 11 },
        { name: "东莞市", value: 1 },
        { name: "中山市", value: 14 },
        { name: "潮州市", value: 8 },
        { name: "揭阳市", value: 24 },
        { name: "云浮市", value: 30 },
      ],
      //散点图地理坐标
      geoCoord: {
        广州市: [113.2841662, 23.12705674],
        韶关市: [113.5889633, 24.79974242],
        深圳市: [114.07138987, 22.54127292],
        珠海市: [113.35987762, 22.02987993],
        汕头市: [116.70380257, 23.37010142],
        佛山市: [113.11925395, 23.02903214],
        江门市: [113.09256928, 22.59021562],
        湛江市: [110.36231105, 21.27493033],
        茂名市: [110.91674406, 21.65938978],
        惠州市: [114.40894817, 23.08104344],
        梅州市: [116.11865541, 24.29821117],
        汕尾市: [115.36825029, 22.77509597],
        河源市: [114.69315095, 23.74462558],
        阳江市: [111.97556344, 21.85955712],
        清远市: [113.0472229, 23.682209],
        东莞市: [113.73608816, 23.04196603],
        中山市: [113.37447051, 22.52019497],
        潮州市: [116.62068942, 23.6666098],
        揭阳市: [116.33232552, 23.54515716],
        云浮市: [112.04311314, 22.92949273],
        肇庆市: [112.46775422, 23.05060538],
      },

具体操作

  methods: {
    /**处理坐标数据 */
    dealGeoCoord() {
      var res = [];
      for (let i = 0; i < this.taskData.length; i++) {
        let geoCoord = this.geoCoord[this.taskData[i].name];
        if (geoCoord) {
          res.push({
            name: this.taskData[i].name,
            value: geoCoord.concat(this.taskData[i].value),
            visualMap: false, //设置散点颜色不受图例visualMap控制
          });
        }
      }
      return res;
    },

    /**echarts画图 */
    drawEcharts() {
      if (this.echart) {
        this.echart.dispose();
        this.echart = null;
      }
      this.$nextTick(() => {
        //创建echart
        let dom = this.$refs["workOverviewMap"];
        this.echart = this.$echarts.init(dom);
        //引入GeoJson地图
        let geoJson = require("./WorkOverviewMapGeoJson");
        this.$echarts.registerMap("HK", geoJson);
        //设置配置
        this.echart.setOption(this.echartsOption);

        this.controlEchartSize();
      });
    },


    /**控制echart宽高动态改变 */
    controlEchartSize() {
      window.addEventListener("resize", () => {
        if (this.echart) {
          this.echart.resize();
        }
      });
    },
  },