echarts 实现省市地图

1、带tab 切换的

<template>
  <div :id="id" class="o-echarts" style="height:800px;600px;"></div>
</template>

<script>
import * as echarts from 'echarts'
import JSON from "./henan.json";

export default {
  name: "echart-map",
  data() {
    return {
      id: "echarts_" + new Date().getTime() + Math.floor(Math.random() * 1000),
      echartObj: null,
      radioList: {
        A: "年度总项目数据查询",
        B: "军转干部在岗培训项目",
        C: "专技人员公需科目项目",
        D: "专技人员新取得中级职称岗前培训项目",
        E: "事业单位新进人员岗前培训项目",
      },
      radioActive: "A",
      option: {
        title: {
          text: "选择所要查询的数据维度",
          top: "3%",
          left: "5%",
          textStyle: {
            fontSize: 18,
            fontWeight: 300,
            color: "#b6d7ff",
          },
        },
        tooltip: {
          padding: 0,
          backgroundColor: "transparent",
          formatter: (params) => {
            // params.data
            return `<table class="map__tooltip o_font20">
                                    <thead>
                                       <tr>
                                           <th>总购买人数</th>
                                           <th>本年度总购买人数</th>
                                           <th>本月度总购买人数</th>
                                           <th>总完成人数</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <th>${params.data.obj.a}</th>
                                            <th>${params.data.obj.b}</th>
                                            <th>${params.data.obj.c}</th>
                                            <th>${params.data.obj.d}</th>
                                         </tr>
                                    </tbody>
                                </table>`;
          },
        },
        legend: {
          orient: "vertical",
          top: "9%",
          left: "5%",
          icon: "circle",
          data: [],
          selectedMode: "single",
          selected: {},
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 30,
          inactiveColor: "#b6d7ff",
          textStyle: {
            color: "#ec808d",
            fontSize: 14,
            fontWeight: 300,
            padding: [0, 0, 0, 15],
          },
        },
        visualMap: {
          min: 0,
          max: 500,
          show: false,
          splitNumber: 5,
          inRange: {
            color: [
              "#FACD91",
              "#74DFB2",
              "#81D3F8",
              "#768FDE",
              "#e9969f",
            ].reverse(),
          },
          textStyle: {
            color: "#fff",
          },
        },
        geo: {
          map: "河南",
          label: {
            normal: {
              show: true,
              color: "#000",
            },
            emphasis: {
              show: true,
              color: "#fff",
            },
          },
          roam: false,
          itemStyle: {
            normal: {
              areaColor: "#8db200",
              borderColor: "#6367ad",
              borderWidth: 1,
            },
            emphasis: {
              areaColor: "#feb6aa", // hover效果
            },
          },
          left: "5%",
          right: "5%",
          top: "5%",
          bottom: "5%",
        },
        series: [
          {
            name: "年度总项目数据查询",
            type: "map",
            geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
            data: [],
          },
        ],
      },
    };
  },
  mounted() {
    this.echartObj = echarts.init(document.getElementById(this.id));
    echarts.registerMap("河南", JSON);
    this.echartObj.setOption(this.getOptions(), true);
    this.echartObj.on("legendselectchanged", (params) => {
      this.radioActive = Object.keys(this.radioList).filter(
        (item) => this.radioList[item] === params.name
      )[0];
      this.echartObj.clear();
      this.echartObj.setOption(this.getOptions());
    });
    window.addEventListener("resize", () => {
      if (this.echartObj && this.echartObj.resize) {
        this.echartObj.resize();
      }
    });
  },
  methods: {
    getOptions() {
      this.setOptions("legend", {
        data: Object.values(this.radioList),
        selected: ((list) => {
          const obj = {};
          Object.keys(list).map((item, index) => {
            obj[list[item]] = item === this.radioActive;
          });
          return obj;
        })(this.radioList),
      });
      this.setOptions(
        "series",
        (() => {
          const arr = [];
          Object.values(this.radioList).map((item, index) => {
            arr[this.radioList[this.radioActive] === item ? "unshift" : "push"](
              {
                name: item,
                type: "map",
                geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
                data: this.getSeriesData(item),
              }
            );
          });
          return arr;
        })()
      );
      return this.option;
    },
    getSeriesData(item) {
      return this.radioList[this.radioActive] === item
        ? JSON.features.map((item) => {
            return {
              name: item.properties.name,
              value: Math.ceil(Math.random() * 500),
              obj: {
                a: Math.ceil(Math.random() * 500),
                b: Math.ceil(Math.random() * 500),
                c: Math.ceil(Math.random() * 500),
                d: Math.ceil(Math.random() * 500),
              },
            };
          })
        : [];
    },
    setOptions(objKey, objVal) {
      if (
        this.option[objKey] &&
        typeof this.option[objKey] === "object" &&
        !Array.isArray(this.option[objKey])
      ) {
        this.option[objKey] = Object.assign(this.option[objKey], objVal);
      } else {
        this.option[objKey] = objVal;
      }
      this.$set(this.option, objKey, this.option[objKey]);
    },
  },
};
</script>