vue+echarts绘制相应中国地图和省份地图

最近项目中的需求，需要根据中国地图的中的某个省份，通过后端返回来的市区，将对应的市区高亮显示，自己提前写了个demo，如下

其中包含了一个中国地图和上海地图：

<template>
  <div>
    <div class="map-box" ref="mapContainChina" />
    <div class="map-box" ref="mapContainProvince" />
  </div>
</template>
 
<script>
import echarts from "echarts";
import china from "echarts/map/json/china.json";
echarts.registerMap("china", china);
export default {
  data() {
    return {
      provinceName: "shanxi1",
      mapName: "陕西",
      listArr: [], //城市json
      max: "", //最大value值
      min: "", // 最小value值
    };
  },
  methods: {
    mapChinaOptions(data, formatter) {
      let max = 0;
      let riskMaxPoint = data.map((item) => {
        return item.riskPointNum;
      });
      if (data && data.length) {
        max = Math.max(...riskMaxPoint);
      }
      return {
        visualMap: {
          show: false,
          min: 0,
          max: max,
          // inRange: {
          //     color: ['#fae8e9', '#f7a8be', '#f1658b ', '#CB000C']
          // },
        },
        // 暂且不知道做啥子用的
        // geo: {
        //     map: 'china',
        //     // layoutCenter:['10%','5%'],
        //     // center: [104.114129, 35.950339],
        // },
        grid: {
          top: 10,
          bottom: 10,
          width: "1000px",
          height: "500px",
        },
        tooltip: {
          trigger: "item",
          formatter: formatter ? formatter : "{b}<br/>{c}",
          borderColor: "#CB000C",
          borderWidth: "1",
        },
        dataRange: {
          // 数值范围对应的 取色
          x: "left",
          y: "bottom",
          show: true,
          splitList: [
            { start: 20000, color: "#CB000C" },
            { start: 10001, end: 20000, color: "#f1658b" },
            { start: 5001, end: 10000, color: "rgba(247,168,190,.8)" },
            { end: 5000, color: "#fae8e9" },
          ],
          color: ["#fae8e9", "#f7a8be", "#f1658b ", "#CB000C"],
        },
        series: [
          {
            type: "map",
            map: "china",
            itemStyle: {
              areaColor: "#fff", //地图的颜色
              borderColor: "rgba(60,70,88,.5)", //边界线颜色
              borderWidth: ".5", //边界线宽
              emphasis: {
                // 对应的鼠标悬浮效果
                color: "#FF0000",
                areaColor: "#CB000C",
                borderColor: "#FFF",
                borderWidth: 1,
              },
            },
            label: {
              fontSize: 12,
              normal: {
                show: true, // 默认 是否显示省份标签
                color: "#000",
              },
              emphasis: {
                show: true, // 鼠标 hover 时是否显示身份标签
                textStyle: {
                  color: "#fff",
                },
              },
            },
            data: data,
          },
        ],
      };
    },
    drawChinaMap() {
      let map = echarts.init(this.$refs.mapContainChina),
        data = [
          { name: "北京", value: 632, riskNum: 563, riskPointNum: 69 },
          { name: "黑龙江", value: 1623, riskNum: 948, riskPointNum: 675 },
          { name: "河北", value: 98, riskNum: 98, riskPointNum: 343 },
        ];

      let options = this.mapChinaOptions(data);

      map.setOption(options);
    },
    getProvinceData(selectNameArr) {
      const obj = require(`echarts/map/json/province/${this.provinceName}.json`);
      console.log("获取城市名称json数据", obj);
      if (obj) {
        let arr = obj.features;
        // 循环取出 城市名称和value值
        for (var j = 0; j < arr.length; j++) {
          arr[j].properties.value = 0;
          this.max = arr[0].id;
          this.min = arr[0].id;
          if (arr[j].id > this.max) {
            this.max = arr[j].id;
          }
          if (arr[j].id < this.min) {
            this.min = arr[j].id;
          }
          if (selectNameArr.indexOf(arr[j].properties.name) > -1)
            this.listArr.push({
              name: arr[j].properties.name,
              value: arr[j].id,
            });
        }
      }
    },
    drawProvinceMap(provinceName, mapName, selectNameArr) {
      this.provinceName = provinceName;
      this.mapName = mapName;
      this.getProvinceData(selectNameArr);
      require(`echarts/map/js/province/${this.provinceName}.js`);
      let _this = this;
      let myChart8 = echarts.init(this.$refs.mapContainProvince);
      // console.log(
      //   "最大value值",
      //   this.max,
      //   "\n",
      //   "最小value值",
      //   this.min,
      //   "\n",
      //   "城市数据",
      //   this.listArr
      // );
      const option = {
        visualMap: {
          // min: _this.min,
          // max: _this.max,
          show: false,
          inRange: {
            // color: ["lightskyblue", "yellow", "orangered"],
            color: ["lightskyblue"],
          },
        },
        tooltip: {
          trigger: "item",
          formatter:function(params){
            return params.value ? params.name + ':' + params.value : params.name + ':' + '0'
          },
          borderColor: "#CB000C",
          borderWidth: "1",
        },
        series: [
          {
            type: "map",
            map: this.mapName,
            itemStyle: {
              normal: { label: { show: true } },
              emphasis: { label: { show: true } },
              emphasis: {
                areaColor: "#67C23A", //鼠标进入时的颜色
              },
            },
            data: _this.listArr,
          },
        ],
      };
      myChart8.setOption(option);
    },
  },
  created() {},
  mounted() {
    this.drawChinaMap();
    const selectNameArr = ["闵行区", "松江区", "宝山区"];
    this.drawProvinceMap("shanghai", "上海", selectNameArr);
  },
};
</script>

<style scoped>
.map-box {
  display: inline-block;
  width: 45vw;
  height: 80vh;
}
</style>

 

 效果如下：