vue中echarts 鼠标悬浮 图例文字颜色相应改变

在Vue中使用ECharts实现鼠标悬浮时图例文字颜色变化，你可以通过监听图表的`mouseover`和`mouseout`事件，并结合ECharts的API来动态设置字体颜色。首先，你需要确保已经安装了ECharts并引入到Vue组件中。

在你的组件中，创建一个ECharts实例，并设置配置项，包括图例：

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

<script>
import ECharts from 'echarts';

export default {
  data() {
    return {
      myChart: null,
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = this.myChart = echarts.init(document.getElementById('chart'));
      
      // 设置基本配置，包括图例
      let option = {
        tooltip: {},
        legend: {
          data: ['数据1', '数据2'], // 你的图例内容
          formatter: (name) => { // 定义一个函数来处理图例的文字样式
            return `<span style='color: #000; cursor: pointer;' onmouseover="this.style.color='red'" onmouseout="this.style.color='#000'">${name}</span>`;
          }
        },
        series: [], // 系列配置...
      };

      chart.setOption(option);
      chart.on('mouseover', (params) => {
        // 当鼠标悬停时，修改对应图例的颜色
        this.myChart.setOption({
          legend: {
            selectedMode: 'single',
            activeName: params.name,
            textStyle: {
              color: 'red'
            }
          }
        });
      });
      chart.on('mouseout', () => {
        this.myChart.setOption({
          legend: {
            textStyle: {
              color: '#000'
            }
          }
        });
      });
    },
  },
};
</script>

在这个例子中，当鼠标悬停在图例上时，图例的文字颜色会变为红色，移开鼠标则恢复原色。请注意，`onmouseover`和`onmouseout`事件绑定的是HTML元素的属性，所以图例的文字会跟随鼠标动作而变色。