React Echarts：如何利用数据字段动态设置高亮标签颜色？

你遇到的问题根源在于通过mouseOver事件全局修改series的emphasis配置，会导致所有数据项的高亮样式被统一覆盖，加上动画时序问题，才会出现异常。正确的做法是利用Echarts内置的样式回调函数，让每个数据项在高亮状态下自动调用自身的color属性，无需手动监听事件。

实现代码 #

以下是适配React版Echarts的完整配置示例（以饼图为例，其他图表类型逻辑一致）：

import React from 'react';
import ReactECharts from 'echarts-for-react';

const dataItems = [
  { name: 'first', value: 10, id: 0, color: '#3dbe23', selected: true },
  { name: 'second', value: 10, id: 1, color: '#149397', selected: false },
  { name: 'third', value: 10, id: 2, color: '#5eca16', selected: false },
  { name: 'fourth', value: 10, id: 3, color: '#d1a11e', selected: false },
  { name: 'fifth', value: 10, id: 4, color: '#5f043c', selected: false },
  { name: 'sixth', value: 10, id: 5, color: '#6b94ee', selected: false },
];

const CustomChart = () => {
  const getChartOption = () => ({
    tooltip: { trigger: 'item' },
    series: [
      {
        type: 'pie',
        data: dataItems,
        itemStyle: {
          borderColor: '#000',
          borderWidth: 1,
          color: (data) => data.dataIndex === 0 ? data.data.color : '#fff',
        },
        // 正常状态下的标签配置
        label: {
          show: true,
          color: '#333',
        },
        // 高亮状态配置
        emphasis: {
          label: {
            // 直接通过回调获取当前数据项的color
            color: (data) => data.data.color,
            // 可选：添加其他高亮样式，比如放大字号
            fontSize: 14,
          },
        },
      },
    ],
  });

  return <ReactECharts option={getChartOption()} />;
};

export default CustomChart;

核心原理 #

• Echarts的emphasis.label.color支持传入回调函数，参数为当前数据项的上下文对象，可直接读取data.data.color获取对应颜色。
• 这种方式由Echarts内部处理高亮状态的切换逻辑，每个数据项的高亮样式独立生效，不会出现全局覆盖或动画时序冲突问题。

版本兼容性 #

确保你的Echarts版本为4.8.0+或5.x系列，这些版本正式支持emphasis相关样式的回调函数能力。

内容的提问来源于stack exchange，提问作者Vlad