如何更改饼图图例中数值和百分比的颜色？

大部分图表库不会单独提供图例中数值、百分比的颜色配置项，你可以通过自定义格式化函数+HTML内联样式来实现，核心是把数值和百分比部分用带颜色样式的<span>标签包裹，以下是主流图表库的具体实现：

ECharts 示例 #

// 先计算数据总量
const total = 你的数据数组.reduce((sum, item) => sum + item.value, 0);

option = {
  legend: {
    textStyle: {
      color: '#你的标题自定义颜色' // 控制标题标签颜色
    },
    // 自定义图例内容格式化逻辑
    formatter: function(name) {
      const targetData = 你的数据数组.find(item => item.name === name);
      const value = targetData.value;
      const percent = ((value / total) * 100).toFixed(1) + '%';
      // 用span标签包裹数值和百分比，指定自定义颜色
      return `${name} <span style="color: #你的数值自定义颜色">${value} (${percent})</span>`;
    }
  },
  // 其他饼图配置项...
};

Highcharts 示例 #

const total = 你的数据数组.reduce((sum, item) => sum + item.y, 0);

Highcharts.chart('container', {
  legend: {
    itemStyle: {
      color: '#你的标题自定义颜色' // 控制标题标签颜色
    },
    labelFormatter: function() {
      const percent = ((this.y / total) * 100).toFixed(1) + '%';
      // 用span标签包裹数值和百分比，指定自定义颜色
      return `${this.name} <span style="color: #你的数值自定义颜色">${this.y} (${percent})</span>`;
    },
    useHTML: true // 必须开启该配置，让Highcharts解析HTML标签
  },
  // 其他饼图配置项...
});

核心逻辑：通过格式化函数重写图例的显示内容，把需要单独改色的部分用HTML标签包裹并指定color样式，部分图表库需要手动开启HTML渲染权限（比如Highcharts的useHTML: true）。

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