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>