echarts 地图 划过区域颜色不同

在 echarts 中，可以通过设置地图区域的 itemStyle 属性来实现鼠标划过区域时颜色的变化。

具体实现步骤如下：

1. 在 echarts 中引入地图数据，并配置地图的基本属性。

2. 设置地图区域的 itemStyle 属性，并定义鼠标划过和普通状态下的区域颜色。

3. 使用 echarts 的事件监听器，监听地图区域的鼠标悬停事件。

4. 在事件回调函数中，根据当前区域的状态，设置对应的颜色。

以下是一个简单的示例代码：

// 引入 echarts
import echarts from 'echarts';

// 初始化 echarts 实例
const myChart = echarts.init(document.getElementById('myChart'));

// 配置地图属性
const option = {
  // 引入地图数据
  geo: {
    map: 'china',
  },
  // 设置地图区域颜色
  series: [{
    type: 'map',
    map: 'china',
    itemStyle: {
      normal: {
        // 普通状态下的颜色
        areaColor: '#ccc',
      },
      emphasis: {
        // 鼠标悬停时的颜色
        areaColor: '#ff0',
      },
    },
  }],
};

// 监听地图区域的鼠标悬停事件
myChart.on('mouseover', function (params) {
  // 获取当前区域的名称
  const name = params.name;
  // 获取地图实例
  const chart = params.event.target;
  // 设置当前区域的颜色
  chart.style.fill = '#f00';
});

// 渲染地图
myChart.setOption(option);

以上代码中，我们先引入 echarts，并初始化一个 echarts 实例。然后，我们配置了地图的基本属性，并设置了地图区域的 itemStyle 属性。

接着，我们使用 echarts 的事件监听器，监听了地图区域的鼠标悬停事件。在事件回调函数中，我们根据当前区域的名称和状态，设置了对应的颜色。

最后，我们调用了 setOption 方法，渲染了地图。这样，当用户鼠标悬停在某个区域时，该区域的颜色就会发生变化。