vue2 echarts 修改鼠标移入地图高亮颜色

在 Vue2 中使用 ECharts 绘制地图并改变鼠标悬停时的颜色，通常涉及到地图组件的事件监听和配置。ECharts 提供了 `emphasis` 配置项来处理选中状态下的样式变化，包括鼠标悬停。

首先，你需要确保已经在地图上设置了需要高亮的数据，并通过 `series` 对象关联到地图。例如：

<template>
  <div id="chart"></div>
</template>

<script>
import { Map } from 'echarts'

export default {
  data() {
    return {
      myChart: null,
      provincesData: ... // 地图数据
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      this.myChart = ECharts.init(document.getElementById('chart'))
      
      const option = {
        map: 'your_map_name', // 替换为你实际的地图名称
        series: [{
          name: '省份',
          type: 'map',
          data: this.provincesData,
          emphasis: {
            itemStyle: {
              normal: {}, // 正常样式
              emphasis: { // 鼠标悬停时的样式
                color: 'rgba(0, 0, 255, 0.8)', // 高亮颜色，这里是一个示例蓝色半透明效果
              },
            },
          },
        }],
      }

      this.myChart.setOption(option)
      this.myChart.on('mouseover', this.handleMouseOver) // 监听鼠标移动事件
    },
    
    handleMouseOver系列ItemEvent(e) {
      console.log('鼠标移到了', e.name) // 获取地图区域名称
      // 如果有更复杂的操作，可以在这里做
    },
  },
}
</script>

在这个例子中，当鼠标悬停在地图上时，对应的数据区域会变为指定的高亮颜色。如果需要改变颜色，只需修改 `emphasis.itemStyle.color` 的值即可。