echarts地图给不同区域设置不同颜色，动态改变地图颜色

动态切换地图颜色的关键方法

地图组件中对不通区域设置不同颜色：

const option = {
	geo: {
	    // areaColor: 区域颜色
		regions:[
        { name: '丘北县', itemStyle: { normal: { areaColor: '#FD9A9A' } } },
        { name: '文山市', itemStyle: { normal: { areaColor: '#FFDC63' } } },
        { name: '砚山县', itemStyle: { normal: { areaColor: '#54E6AB' } } },
        { name: '西畴县', itemStyle: { normal: { areaColor: '#489EFF' } } },
        { name: '麻栗坡县', itemStyle: { normal: { areaColor: '#54E6AB' } } },
        { name: '马关县', itemStyle: { normal: { areaColor: '#FD9A9A' } } },
        { name: '广南县', itemStyle: { normal: { areaColor: '#FFDC63' } } },
        { name: '富宁县', itemStyle: { normal: { areaColor: '#489EFF' } } }
      ]
	},
	seriers: []
}

数据改变时重绘地图的关键：
（地图组件中监听数据变化）

  watch: {
    // 关键方法，如果数据改变可以重绘地图
    'splitList': {
      handler(newVal, old) {
        this.setOption()
      },
    }
  },

父组件

<template>
  <div class=''>
    <ColorChart id="provinceChart" :mapData="mapData" width="100vw" height="40vh" :splitList="splitList"></ColorChart>
  </div>
</template>

<script>
import ColorChart from '@/components/echart-map/colorCharts.vue'

export default {
  name: '',
  props : { },
  components: { ColorChart },
  data() {
    return {
      mapData: {
        data: [
          { name: '丘北县', deptId: '22', value: 1 },
          { name: '文山市', deptId: '19', value: 2 },
          { name: '砚山县', deptId: '21', value: 3 },
          { name: '西畴县', deptId: '43', value: 4 },
          { name: '麻栗坡县', deptId: '24', value: 5 },
          { name: '马关县', deptId: '20', value: 6 },
          { name: '广南县', deptId: '23', value: 7 },
          { name: '富宁县', deptId: '', value: 8 }
        ]
      },
      splitList: [
        { name: '丘北县', itemStyle: { normal: { areaColor: '#FD9A9A' } } },
        { name: '文山市', itemStyle: { normal: { areaColor: '#FFDC63' } } },
        { name: '砚山县', itemStyle: { normal: { areaColor: '#54E6AB' } } },
        { name: '西畴县', itemStyle: { normal: { areaColor: '#489EFF' } } },
        { name: '麻栗坡县', itemStyle: { normal: { areaColor: '#54E6AB' } } },
        { name: '马关县', itemStyle: { normal: { areaColor: '#FD9A9A' } } },
        { name: '广南县', itemStyle: { normal: { areaColor: '#FFDC63' } } },
        { name: '富宁县', itemStyle: { normal: { areaColor: '#489EFF' } } }
      ]
    }
  },
  created() { },
  mounted() { },
  methods: { }
}
</script>

<style scoped lang='scss'></style>

子组件

位置 @/components/echart-map/colorCharts.vue

<template>
  <div :id="id" :style="{ width, height }"></div>
</template>

<script>
import * as echarts from 'echarts'
import wenshan from './city-data.json'
export default {
  name: 'ColorChart',
  props: ['id', 'width', 'height', 'mapData', 'splitList'],
  computed: {},
  data() {
    return {
      myMap: {}
    }
  },
  watch: {
    // 关键方法，如果数据改变可以重绘地图
    'splitList': {
      handler(newVal, old) {
        this.setOption()
      },
    }
  },
  created() { },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const _this = this
      echarts.registerMap("wenshan", wenshan);
      this.myMap = echarts.init(document.getElementById(this.id),);

      window.addEventListener("resize", function () {
        _this.myMap.resize();
      });
      this.setOption()
    },
    setOption() {
      // 设置基础配置项
      const option = {
        geo: {
          map: 'wenshan',
          roam: false,//滚轮 放大缩小
          zoom: 1.1,
          label: {
            show: true,
            fontSize: '14px',
            color: '#49546B',
            emphasis: {
              show: true, // 选中时是否展示label
            }
          },
          //是否允许拖拽
          roam: false,
          itemStyle: {
            normal: {
              areaColor: '#323c48',//默认区块颜色
              // borderColor: '#03b8c0',//区块描边颜色
              borderWidth: 0//区块描边颜色
            },
            // emphasis: {
            //   areaColor: '#45ad00'//鼠标划过区块的颜色
            // },

          },
          // 地图区域样式设置
          regions: this.splitList
        },
        series: [
          {
            name: '文山市',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            map: "wenshan",
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            zlevel: 1,
            data: this.mapData ? this.mapData.data : [],
          },
        ],
      };
      // 将配置应用到地图上
      this.myMap.setOption(option);
      // this.myMap.on('click', function (params) {
      //   this.$emit('handleClick', params.data)
      // });
    }
  }
}
</script>

<style scoped lang='scss'>
</style>