echarts map地图功能 实现点击后高亮效果

最近项目中的地图需要重构,产品需求点击后实现选中的省份高亮,网上查询实现的思路太多,在这记录一下自己的实现过程
效果如图:点击青海后青海省份高亮

技术栈使用vue2.6 + echart4.9.0
1.data中定义变量selectName,用于存储点击的省份

  data () {
    return {
      selectName: '',
    }
  }

2. option 中geo属性添加regions

 geo: {
          map: 'china',
          show: true,
          roam: true,
          zoom: this.centerObj.layoutSize,
          center: this.centerObj.center,
          select: {
            itemStyle: {
              // color: this.clickcolor, // 设置地图点击后的颜色
              color: this.clickcolor, // 设置地图点击后的颜色
              areaColor: this.clickcolor
            }
          },
          label: {
            normal: {
              show: true,
              color: '#999',
              fontSize: '12'
            },
            emphasis: {
              show: true,
              color: '#999',
              fontSize: '12'
            }
          },
          itemStyle: {
            normal: {
              areaColor: '#fff',
              borderColor: '#c5c5c5'
              // borderColor: 'red'
            },
            emphasis: {
              areaColor: '#EFF1FF' // 悬浮区背景
            }
          },
          regions: [
            { // 设置点击后高亮
              name: this.selectName, // 高亮的省份
              itemStyle: {
                areaColor: '#EFF1FF' // 区域颜色
              }
            }
          ]
        },

3.给地图添加点击事件,给selectName赋上点击的省份名称

 this.myChart = echarts.init(document.getElementById('map'))
      this.myChart.on('click', (params) => {
            if (params.data) {
            // 附上名称
              this.selectName = params.name
              // 重新加载地图
              this.loadMap()
            }
          })

完整代码如下

<template>
  <div class="map-module"  id="map"></div>
</template>
<script>
import * as echarts from 'echarts'
import china from 'echarts/map/json/china.json'
echarts.registerMap('china', china)
export default {
  name: 'ProvinceMap',
  data () {
    return {
      myChart: null,
      clickcolor: '#ffffff',
      selectName: ''   
      }
  },
  mounted () {
    this.myChart = echarts.init(document.getElementById('map'))
    this.initData()
    // this.loadMap()
  },
  methods: {
    initData () {
    // 调取数据接口
      PostGeographicalStatistics().then(res => {
        if (res.code === '200') {
          this.myChart.on('click', (params) => {
            if (params.data) {
              // this.centerObj.center = this.geoCoordMap[params.name]
              this.centerObj = {
                center: this.geoCoordMap[params.name],
                layoutCenter: ['40%', '50%'],
                layoutSize: 5
              }
              this.selectName = params.name
              this.$emit('mapClick', params.data)
              this.loadMap()
            }
          })
          this.$nextTick(() => {
            this.loadMap()
          })
        }
      })
    },
    loadMap () {
      let maxValue = 0
      this.provinceData.forEach(item => {
        if (item.value > maxValue) {
          maxValue = item.value
        }
      })
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            if (typeof (params.value)[2] === 'undefined') {
              return isNaN(params.value) ? (params.name + ' : ' + 0) : (params.name + ' : ' + params.data.value[2])
            } else {
              // return params.name + ' : ' + params.value[2]
              return isNaN(params.value[2]) ? (params.name + ' : ' + 0) : (params.name + ' : ' + params.value[2])
            }
          }
        },
        geo: {
          map: 'china',
          show: true,
          roam: true,
          zoom: this.centerObj.layoutSize,
          center: this.centerObj.center,
          select: {
            itemStyle: {
              // color: this.clickcolor, // 设置地图点击后的颜色
              color: this.clickcolor, // 设置地图点击后的颜色
              areaColor: this.clickcolor
            }
          },
          label: {
            normal: {
              show: true,
              color: '#999',
              fontSize: '12'
            },
            emphasis: {
              show: true,
              color: '#999',
              fontSize: '12'
            }
          },
          itemStyle: {
            normal: {
              areaColor: '#fff',
              borderColor: '#c5c5c5'
              // borderColor: 'red'
            },
            emphasis: {
              areaColor: '#EFF1FF' // 悬浮区背景
            }
          },
          regions: [
            { // 设置点击后高亮
              name: this.selectName,
              itemStyle: {
                areaColor: '#EFF1FF' // 区域颜色
              }
            },
            { // 隐藏南海诸岛
              name: '南海诸岛',
              itemStyle: {
              // 隐藏地图
                normal: {
                  opacity: 0 // 为 0 时不绘制该图形
                }
              },
              label: {
                show: false // 隐藏文字
              }
            }
          ]
        },
        series: [
          {
            symbolSize: 5,
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: false
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: 'red'
              }
            },
            name: 'light',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: this.convertData(this.provinceData)
          },
          {
            type: 'map',
            map: '中国',
            geoIndex: 0,
            aspectScale: 0.75, // 长宽比
            showLegendSymbol: false,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: '#031525',
                borderColor: '#3B5077'
              },
              emphasis: {
                areaColor: '#2B91B7'
              }
            },
            animation: false,
            data: this.convertData(this.provinceData)
          },
          {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: this.convertData(this.provinceData),
            symbolSize: [12, 12],
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: false
              }
            },
            itemStyle: {
              normal: {
                color: '#4d5cff',
                shadowBlur: 0,
                shadowColor: '#4d5cff'
              }
            },
            zlevel: 1
          }
        ]
      }
      this.myChart.setOption(option)
    },
    convertData (data) {
      var res = []
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.geoCoordMap[data[i].name]
        if (geoCoord) {
          res.push({
            ...data[i],
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
          })
        }
      }
      return res
    }
  }
}
</script>
<style lang="less" scoped>
.map-module{
  position: relative;
  width: 100%;
  height: 440px;
  background: linear-gradient(#FDFDFF, #EDF4FF);
}
/deep/.l7-control-container{
  display: none;
}

</style>