Echarts地图根据划过事件更改颜色

要在鼠标划过地图时更改颜色，可以使用 Echarts 的地图事件来实现。具体来说，可以在地图的鼠标移入事件中，动态更改地图区域的颜色。

下面是一个简单示例代码：

option = {
  series: [{
    type: 'map',
    map: 'china',
    data: [
      {name: '北京', value: 100},
      {name: '上海', value: 200},
      {name: '广州', value: 300},
      {name: '深圳', value: 400},
      {name: '重庆', value: 500},
    ],
    itemStyle: {
      normal: {
        areaColor: '#ccc',
        borderColor: '#aaa'
      },
      emphasis: {
        areaColor: '#f00'
      }
    },
    // 地图事件
    // 鼠标移入地图区域时触发
    // 设置对应区域的高亮样式
    // 这里使用了 itemStyle.emphasis 中的样式
    // 可以根据实际需求自定义样式
    // 鼠标移出地图区域时，样式会自动恢复
    // 无需手动设置
    // 如果需要手动清除高亮样式，可以使用 setOption 方法
    // 将对应区域的 itemStyle 设置为空对象即可
    // 例如：myChart.setOption({series: [{itemStyle: {normal: {}, emphasis: {}}}])
    // 其中 myChart 是 echarts 实例对象
    event: {
      'mouseover': function(params) {
        var dataIndex = params.dataIndex;
        this.setOption({
          series: [{
            data: [{
              name: params.name,
              value: params.value,
              itemStyle: {
                emphasis: {
                  areaColor: '#f00'
                }
              }
            }]
          }]
        });
      }
    }
  }]
};

在上面的代码中，我们在 series 中的 itemStyle 中定义了普通状态下和高亮状态下的样式。在地图事件中，我们监听了鼠标移入事件，动态更改对应区域的高亮样式，从而实现了鼠标划过更改颜色的效果。