echarts地图-根据数值标识区域颜色（密度图）

父组件

<template>
  <MapChart id="atmosphereChart" :mapData="mapData" width="100vw" height="40vh" :max="100" @handleClick="handleClick"></MapChart>
</template>

<script>
import MapChart from '@/components/echarts/Charts.vue'
export default {
    components: {MapChart},
    data() {
        return {
             mapData: {
                data: [
                   { name: '丘北县', deptId: '22', value: 100 },
                   { name: '文山市', deptId: '19', value: 100 },
                   { name: '砚山县', deptId: '21', value: 0 },
                   { name: '西畴县', deptId: '43', value: 0 },
                   { name: '麻栗坡县', deptId: '24', value: 0 },
                   { name: '马关县', deptId: '20', value: 0 },
                   { name: '广南县', deptId: '23', value: 0 },
                   { name: '富宁县', deptId: '', value: 100 }
                ]
            },       
        }
    }
}
</script>

地图组件

位置 @/components/echarts/Charts.vue

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

<script>
import * as echarts from 'echarts'
// import resize from './mixins/resize'
import wenshan from './city-data.json'
export default {
  name: 'MapChart',
  // mixins: [resize],
  props: ['id', 'width', 'height', 'max', 'mapData', 'colorRange'],
  computed: {},
  data() {
    return {
      myMap: {}
    }
  },
  created() { },
  // watch: {
  //   'mapData': {
  //     handler(newVal, old) {
  //       console.log(newVal);
  //     },
  //     immediate: true
  //   }
  // },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const _this = this
      // 地图颜色
      let colorRange = this.colorRange || ['#D2F2EC', '#AEE4D6']
      let borderWidth = this.colorRange ? 0 : 2
      echarts.registerMap("wenshan", wenshan);
      this.myMap = echarts.init(document.getElementById(this.id),);

      window.addEventListener("resize", function () {
        _this.myMap.resize();
      });

      // 设置基础配置项
      const option = {
        visualMap: [
          {
            show: false,
            type: 'continuous', // 定义为连续型 viusalMap
            min: 0, //指定 visualMapContinuous 组件的允许的最小值
            max: this.max,
            realtime: false,
            calculable: false,
            inRange: {
              color: colorRange
            },
            itemWidth: 0,
            itemHeight: 0,
          },
        ],
        series: [
          {
            type: "map",
            map: "wenshan",
            // silent: true, // 取消鼠标悬停高亮
            label: {
              show: true,
              fontSize: '14px',
              color: '#49546B'
            },
            itemStyle: {
              normal: {
                borderWidth, // 边框宽度
                borderColor: "#AEE4D6", // 边框颜色
                // shadowColor: '#89ddc2',
                // shadowBlur: 2,
                // shadowOffsetY: 5
              },
              emphasis: {//鼠标移入高亮显颜色
                areaColor: '#f46d43'
              },
              selectedMode: "single", //选择模式，单选，只能选中一个地市
              // select: {//这个就是鼠标点击后，地图想要展示的配置
              //   disabled: false,//可以被选中
              //   itemStyle: {//相关配置项很多，可以参考echarts官网
              //     areaColor: "#89ddc2"//选中
              //   }
              // }
            },
            data: this.mapData ? this.mapData.data : []
          },
        ],
      };
      // 将配置应用到地图上
      this.myMap.setOption(option);
      this.myMap.on('click', function (params) {
        // alert(params.data.name + ':' + params.data.value);
        _this.$emit('handleClick', params.data)
      });
    }
  }
}
</script>

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