基于echarts+vue实现中国地图热力图，并且鼠标悬浮对应指定的颜色

废话不多，先上效果

ChinaMap.gif

上图所示，颜色渐变深蓝色到浅蓝色，鼠标悬浮之后，颜色会不变 而不是指定的一个颜色，
ps:(gif录屏软件水印没去，请大家忽略)

直接说原理吧

为了不耽误着急的同学的时间，直接说原理，首先每个省或者地区，一定是在地图上有自己的值，
比如能蒙古：200个 这种
请看我附上的代码的
item.itemStyle = {emphasis: {areaColor: this.chinaMapData.cololrGradual[valueIndex]}}
这一段，给每一个地区的 areaColor 设置对应的颜色，根据它对应的值，
思路：

• 1 先求出苹果或者香蕉的最大值，Math.max es6方法即可
• 2 然后跟后台沟通一下数据量，我们这边数据比较大，所有我完全可以把一个区间的颜色先拆分成100份，（100份了 足够你渐变了）为什么100份？ 如果你数据量很大几十万 你不可能循环几十万次 细分渐变颜色，性能差
  根据rgb 16进制颜色转换写一个函数，将次区间的颜色进行拆分，就可以得到一个渐变的数组
  （这个函数我放在后面 函数是借鉴网上其他大神的）

    // 将颜色分为100份渐变 备用
    this.chinaMapData.cololrGradual = this.gradient('#E6F0F5', '#0D6CA2', 100)

• 3 好了 你就可以根据对应的值占的百分比进行计算了，最多也就循环100次

 MapToSeries(name, data = []) {
      data.forEach(item=>{
        // 根据分解的值 获取对应的颜色
        let valueIndex = Math.floor(((item.value-1)/this.chinaMapData.max)*100)
        // 这一行代码是核心
        item.itemStyle = {emphasis: {areaColor: this.chinaMapData.cololrGradual[valueIndex]}}
      })
      let series = {
        name: name,
        type: "map",
        mapType: "china",
        showLegendSymbol: false,
        roam: false,
        label: {
          normal: {
            show: false
          },
          emphasis: {
            show: true
          }
        },
        itemStyle: {
          // 地图交界线颜色
          borderColor: "rgba(255,255,255,0.4)",
          // 交界线宽
          borderWidth: 1,
          emphasis: {
            // 阴影
            shadowBlur: 10,
            shadowOffsetX: 0,
            hoverAnimation: true,
            // shadowColor: 'rgba(0, 0, 0, 0.5)',
            // 普通图表的高亮颜色
            // color: "rgba(0, 0, 0, 0.5)",
            // barBorderWidth: 1,
            // 地图区域的高亮颜色
            areaColor: this.chinaMapData.areaColor,
            label:{show:true}
          }
        },
        data
      };
      return series;
    },

颜色渐变函数

 // 根据颜色区间 计算所有渐变
    gradient (startColor,endColor,step){
      // 将 hex 转换为rgb
      var sColor = this.hexToRgb(startColor);
      var eColor = this.hexToRgb(endColor);
      // 计算R\G\B每一步的差值
      var rStep = (eColor[0] - sColor[0]) / step;
      var gStep = (eColor[1] - sColor[1]) / step;
      var bStep = (eColor[2] - sColor[2]) / step;
      var gradientColorArr = [];
      for(var i=0;i

完美解决

如果对大家有帮助 希望点赞收藏留言，我会一直更新的，谢谢大家！
如果有哪些地方不周，也希望各位同学不吝赐教！ 谢谢！