echarts 给省份地图区块不同颜色

<template>
  <div id="app">
    <div @click="initMap" id="main"></div>
    <div @click="reLoad" class="re-load">
      <i class="el-icon-refresh-right"></i>
    </div>
  </div>
</template>

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

export default {
  data() {
    return {
      map: null,
      myChart: null,
      dataList: [],
    };
  },
  mounted() {
    this.dataList = this.changeList();
    echarts.registerMap("河南", JSON);
    this.myChart = echarts.init(document.getElementById("main"));
    var option = {
      //悬停提示
      tooltip: {
        formatter: function (params, ticket, callback) {
          return (
            params.seriesName +
            "<br />" +
            params.name +
            "：" +
            params.value +
            "吨/㎡"
          );
        }, //数据格式化
      },
      //通过visualMap设置，设置visualMap中的min最小值、max最大值、color颜色值，echart会根据value数值自动匹配对应颜色
      visualMap: {
        min: 0,
        max: 20000,
        left: "left",
        top: "bottom",
        text: ["20000", "0"], //取值范围的文字
        inRange: {
          color: ["#e6f7ff", "#1890FF", "#0050b3"], //取值范围的颜色
        },
        show: true, //图注
      },
      geo: {
        map: "河南",
        roam: false, //不开启缩放和平移
        zoom: 1.23, //视角缩放比例
        label: {
          normal: {
            show: true,
            fontSize: "10",
            color: "rgba(0,0,0,0.7)",
          },
        },
        itemStyle: {
          normal: {
            borderColor: "rgba(0, 0, 0, 0.2)",
          },
          emphasis: {
            areaColor: "#F3B329", //鼠标选择区域颜色
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        // data:this.dataList

        regions: [
          //对不同的区块进行着色
          {
            name: "郑州市",
            itemStyle: {
              normal: {
                areaColor: "#5CD89E",
              },
              emphasis: {
                areaColor: "#5CD89E",
              },
            },
          },
          {
            name: "开封市",
            itemStyle: {
              normal: {
                areaColor: "#FCCF73",
              },
              emphasis: {
                areaColor: "#FCCF73",
              },
            },
          },
          {
            name: "洛阳市",
            itemStyle: {
              normal: {
                areaColor: "#81A1FD",
              },
              emphasis: {
                areaColor: "#81A1FD",
              },
            },
          },
          {
            name: "许昌市",
            itemStyle: {
              normal: {
                areaColor: "#FD898D",
              },
              emphasis: {
                areaColor: "#FD898D",
              },
            },
          },
        ],
      },
      series: [
        {
          name: "污染量",
          type: "map",
          mapType: "china",
          geoIndex: 0,
          data: this.dataList,
        },
      ],
    };
    this.myChart.setOption(option);

    // echart图表自适应
    window.onresize = () => {
      this.myChart.resize();
    };
  },
  methods: {
    reLoad() {
      this.dataList = this.changeList();
      this.myChart.setOption({
        series: {
          data: this.dataList,
        },
      });
    },
    initMap() {
      this.myChart.on("click", (param) => {
        event.stopPropagation(); // 阻止冒泡
        this.$message.success(`${param.name}的降水量为: ${param.value} 吨/㎡`);
      });
    },
    // randomValue() {
    //   return Math.round(Math.random() * 70);
    // },
    changeList() {
    //   var arr = [
    //     { name: "郑州", value: 1000 },
    //     { name: "洛阳", value: 200 },
    //     { name: "开封", value: 300 },
    //     { name: "周口", value: 4000 },
    //     { name: "济源", value: 4000 },
    //     { name: "安阳", value: 4000 },
    //     { name: "南阳", value: 200, color: "#cfc5de" },
    //     { name: "信阳", value: 5000 },
    //     { name: "驻马店", value: 5000 },
    //     { name: "商丘", value: 5000 },
    //     { name: "漯河", value: 5000 },
    //     { name: "许昌", value: 12000 },
    //     { name: "焦作", value: 5000 },
    //     { name: "鹤壁", value: 5000 },
    //     { name: "濮阳", value: 5000 },
    //     { name: "平顶山", value: 5000 },
    //     { name: "三门峡", value: 5000 },
    //   ];
    //   return arr;
    },
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
#app {
  width: 100%;
  height: 900px;
  background: rgb(58, 4, 4);
  display: flex;
  justify-content: center;
  align-items: center;
}
#main {
  width: 80%;
  height: 80%;
}
.re-load {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #000;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  color: #fff;
  z-index: 999;
  font-weight: bold;
  cursor: pointer;
}
</style>