vue+echart实现某一个省下面的市级地图

vue+echart实现某一个省下面的市级地图

我随便找了一个省

<div id="shandong-map" style="width: 700px; height: 600px"></div>

data(){
  dataList: [ // 可以当作后台返回的数据
     { label: "1", name: "济南市" },
      { label: "4", name: "青岛市" },
      { label: "1", name: "淄博市" },
      { label: "4", name: "枣庄市" },
      { label: "2", name: "东营市" },
      { label: "3", name: "烟台市" },
      { label: "4", name: "潍坊市" },
      { label: "1", name: "济宁市" },
      { label: "4", name: "泰安市" },
      { label: "2", name: "威海市" },
      { label: "1", name: "日照市" },
      { label: "3", name: "滨州市" },
      { label: "4", name: "烟台市" },
      { label: "2", name: "德州市" },
      { label: "3", name: "聊城市" },
      { label: "2", name: "临沂市" },
      { label: "3", name: "菏泽市" },
      { label: "1", name: "莱芜市" },
      { label: "2", name: "临沂市" },
   ],
}

 let result = [];
 // 上面定义变量的时候没有写 就自己遍历了一个  要跟下面的visualMap对应
      this.dataList.forEach((ele) => {
        if (ele.label === "1") {
          ele.value = [10, 20];
        } else if (ele.label === "2") {
          ele.value = [30, 40];
        } else if (ele.label === "3") {
          ele.value = [50, 68];
        } else if (ele.label === "4") {
          ele.value = [76, 100];
        }
      });
      // console.log(this.dataList);
      let chart = echarts.init(document.getElementById("shandong-map"));
      const shandong = require("../../../map/json/province/shandong");
      echarts.registerMap("shandong", shandong);
      let optios = {
        series: [
          {
            type: "map",
            map: "shandong",
            zoom: 1,
            itemStyle: {
              normal: { label: { show: true } },
              emphasis: { label: { show: true } },
            },
            data: this.dataList,
            // geoIndex: 0,
          },
        ],
        geo: {
          roam: true,
        },
        tooltip: {
          formatter: function (params) {
            console.log(params);
            return params.name + "<br>" + "当前移入的是:" + params.data.label;
          },
        },
        visualMap: {
          show: true,
          type: "piecewise",
          min: 0,
          max: 100,
          left: 10,
          bottom: 0,
          top: "80% ",
          // showLabel: 0,
          // text: ['高', '低'],
          // #FF6F69 #F6BA91 #FCE1CF #D5E8CA #A8CF8E #8CBB6E #6EAA47
          showLabel: true,
          textStyle: {
            color: "#000",
          },
          pieces: [
            {
              gt: 75,
              lte: 100,
              label: "4",
              color: "#f7358c",
              // inRange: {
              //     color: ['red', 'black']
              // }
            },
            {
              gt: 50,
              lte: 75,
              label: "3",
              color: "#fb9632",
              // inRange: {
              //     color: ['red', 'black']
              // }
            },
            {
              gt: 25,
              lte: 50,
              label: "2",
              color: "#08b2ff",
            },
            {
              gte: 0,
              lte: 25,
              label: "1",
              color: "#4d2ed2",
            },
            // , {
            //     value: 0,
            //     color: '#6EAA47'
            // }
          ],
        },
      };
      chart.setOption({ ...optios });