echarts地图省份高亮的颜色如何实现过渡效果?

Question

现在高亮是瞬间颜色就变了，可否实现颜色过渡效果或者动画

Answer 1

要实现echarts地图省份hover时高亮的颜色过渡效果，可以使用echarts提供的zlevel属性和z轴堆叠的方式。

具体实现步骤如下：

1. 在series中设置地图的属性map，并指定label和itemStyle。

series: [
  {
    type: 'map',
    map: 'china',
    label: {
      show: true
    },
    itemStyle: {
      areaColor: 'rgba(0,0,0,0)', // 省份默认颜色
      borderColor: '#ffffff' // 省份边界线颜色
    },
    emphasis: {
      label: {
        show: true
      },
      itemStyle: {
        areaColor: 'rgba(0,0,0,0)' // 鼠标hover省份颜色
      }
    }
  }
]

2. 为每个省份添加一个zlevel值，让不同的省份处于不同的层级。

data.forEach(function(item) {
  var name = item.name;
  var value = item.value;

  // 获取省份的region
  var region = provincesNameMap[name];
  if (region) {
    seriesData.push({
      name: name,
      value: value,
      region: region,
      zlevel: 1 // 设置zlevel属性
    });
  }
});

3. 在地图的itemStyle中设置emphasis属性，指定鼠标hover时的高亮颜色及渐变过渡效果。

itemStyle: {
  areaColor: 'rgba(0,0,0,0)',
  borderColor: '#ffffff'
},
emphasis: {
  label: {
    show: true
  },
  itemStyle: {
    areaColor: new echarts.graphic.LinearGradient(
      0, 0, 0, 1,
      [
        { offset: 0, color: '#FE9E21' },
        { offset: 1, color: '#F44336' }
      ] // 高亮渐变过渡色
    )
  }
}

4. 最后，在option的animation中设置高亮过渡的动画效果，如下：

animation: true, // 动画效果
animationDuration: 1000, // 动画时长
animationEasing: 'cubicOut' // 缓动效果

这样就实现了echarts地图省份hover时高亮的颜色过渡效果。