e-cahr的地图组件封装（浙江省为例）

需要额外引入地区的js文件  js 文件在你node—module的e-char包里就可以找到，json和js格式都有

<style lang="less">
.o-echarts {
  min- 30px;
  min-height: 30px;
   100%;
  height: 100%;
}
</style>
<template>
  <div :id="id" class="o-echarts"></div>
</template>

<script>
import echarts from "echarts"
import JSON from "./zhejiang.json"

export default {
  props: {
    dataMap: {},
    maxNumber: {
      type: String,
      default: "0",
    },
  },
  name: "echart-map",
  data() {
    return {
      id: "echarts_" + new Date().getTime() + Math.floor(Math.random() * 1000),
      echartObj: null,
      option: {
        title: {
          text: "",
          top: "3%",
          left: "5%",
          textStyle: {
            fontSize: 18,
            fontWeight: 300,
            color: "#b6d7ff",
          },
        },
        tooltip: {
          padding: 0,
          backgroundColor: "transparent",
          formatter: (params) => {
            return ` <div style="height:50px;100px;background:black;color:white;font-size:14px;opacity: 0.6;line-height:50px;text-align:center;">园区数量：${params.data.obj.a}</div>
                                          `
          },
        },
        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: 10,
          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: [],
          },
        ],
      },
    }
  },
  watch: {
    maxNumber: {
      handler(val) {
        this.option.visualMap.max = val
        this.echartObj = echarts.init(document.getElementById(this.id))
        echarts.registerMap("浙江", JSON)
        this.echartObj.setOption(this.getOptions(), true)
        this.echartObj.on("click", function (params) {
          console.log(params)
          //逻辑控制----联动事件，触发父组件的事件
        })
        this.echartObj.clear()
        this.echartObj.setOption(this.getOptions())
      },
      deep: true,
    },
  },
  mounted() {
    window.addEventListener("resize", () => {
      if (this.echartObj && this.echartObj.resize) {
        this.echartObj.resize() //地图重置
      }
    })
  },
  methods: {
    getOptions() {
      this.setOptions(
        "series",
        (() => {
          const arr = []
          arr.push({
            //添加市级数组
            name: "",
            type: "map",
            geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
            data: this.getSeriesData(true),
          })
          return arr
        })()
      )
      return this.option
    },
    getSeriesData(item) {
      //设置每块市级信息
      return item
        ? JSON.features.map((item) => {
            return {
              name: item.properties.name,
              value: this.getvalue(item.properties.name),
              obj: {
                a: this.getobj(item.properties.name),
              },
            }
          })
        : []
    },
    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])
    },
    getvalue(item) {
      //返回地图热力信息--用于地图颜色识别
      for (var i = 0; i < this.dataMap.length; i++) {
        if (this.dataMap[i].name == item) {
          return this.dataMap[i].number
        }
      }
    },
    getobj(item) {
      //返回提示框信息--鼠标移入效果
      for (var i = 0; i < this.dataMap.length; i++) {
        if (this.dataMap[i].name == item) {
          return this.dataMap[i].number
        }
      }
    },
  },
}
</script>