echarts legend文字鼠标悬浮变色

您可以使用ECharts提供的tooltip功能实现legend文字鼠标悬浮变色的效果。具体做法如下：

1. 在legend配置项中，设置selectedMode为false，禁止点击切换legend状态，使得legend文字处于常态状态。

2. 在tooltip配置项中，设置formatter回调函数，用于自定义tooltip的显示内容。在回调函数中，可以通过params.name判断当前鼠标悬浮的是哪个legend，然后使用CSS样式设置相应的颜色，实现文字变色的效果。

示例代码如下：

option = {
    legend: {
        selectedMode: false,
        data: ['图例1', '图例2', '图例3']
    },
    tooltip: {
        formatter: function(params) {
            var name = params.name;
            var color = ''; // 根据name设置颜色
            return '<span style="color:' + color + '">' + name + '</span>';
        }
    },
    // 省略其他配置项和数据
};

注意：为了使tooltip只在鼠标悬浮在legend文字上时显示，而不是在整个图表区域都显示，可以将trigger配置项设置为'item'。

相关问题

echarts饼图legend鼠标悬浮时改变当前legend文字颜色

在ECharts中，如果你想在饼图legend（图例）的鼠标悬浮时改变当前legend文字的颜色，你可以通过设置`emphasis`属性来实现这个交互效果。首先，在初始化图表时，为`legend`配置一个`emphasis`部分，然后指定当鼠标悬停在图例上时，`textStyle`（文本样式）的变化。

这是一个简单的示例：

var option = {
  legend: {
    data: ['数据1', '数据2', '数据3'], // 图例项
    emphasis: {                      // 鼠标悬停时的效果
      textStyle: {                  // 文本样式变化
        color: 'red'                // 改变颜色为红色
      }
    }
  },
  series: [
    {
      name: '饼图',
      type: 'pie',
      data: [...]  // 饼图的数据
    }
  ]
};

echarts.init(document.getElementById('main')).setOption(option);

在这个例子中，当用户将鼠标悬停在图例上的某个条目时，对应的图例文字颜色会变为红色。如果需要更复杂的动画效果或其他自定义选项，可以进一步调整`emphasis`内的设置。

echarts 在legend 鼠标悬浮显示

您好！要在 ECharts 的图例（legend）上实现鼠标悬浮显示效果，可以使用 ECharts 提供的 tooltip 组件。通过配置 tooltip 组件的 trigger 属性为 'item'，并设置 formatter 属性来自定义悬浮显示的内容。

以下是一个示例配置：

option = {
  ...
  tooltip: {
    trigger: 'item',
    formatter: '{a} : {b}'
  },
  legend: {
    ...
  },
  ...
};

在上述示例中，tooltip 的 trigger 属性设置为 'item'，表示鼠标悬浮在图例项上时触发显示 tooltip。formatter 属性的值 '{a} : {b}' 是一个示例，您可以根据需要自定义显示的内容。

希望对您有所帮助！如果您还有其他问题，请随时提问。