如何获取Apache ECharts标签格式化回调中自动计算的标签颜色？

问题背景 #

在Apache ECharts饼图的标签格式化回调中，params对象仅提供了扇区的color属性，但未包含ECharts自动计算的标签颜色。默认情况下，ECharts会根据扇区颜色的深浅，自动将标签设为近黑色（浅色扇区）或近白色（深色扇区）。现在需要在富文本标签中，让金额、百分比等子元素的颜色跟随主标签颜色变化（主标签为黑色时子元素用浅灰，主标签为白色时子元素用深灰），希望直接复用ECharts的计算结果，而非手动实现亮度判断。

解决方案 #

方法1：直接调用ECharts内部方法获取标签颜色 #

ECharts未在params中直接暴露标签颜色，但可通过图表实例的内部方法间接获取。你可以通过图表实例访问系列模型，调用其内部的标签颜色计算方法：

// 假设图表实例已存储在chart变量中
formatter: function(params) {
    // 获取对应系列的模型
    const seriesModel = chart.getModel().getSeriesByIndex(params.seriesIndex);
    // 调用内部方法获取自动计算的标签颜色
    const mainLabelColor = seriesModel.getLabelTextColor(params.dataIndex);
    // 根据主标签颜色确定子元素颜色
    const subColor = mainLabelColor === '#000000' ? '#999' : '#666';

    return `${params.name}\n{amt|${params.value.formatter(params.value.value)}} ({pct|${params.percent}}%)`;
},
rich: {
    pct: {
        color: function(params) {
            const seriesModel = chart.getModel().getSeriesByIndex(params.seriesIndex);
            const mainLabelColor = seriesModel.getLabelTextColor(params.dataIndex);
            return mainLabelColor === '#000000' ? '#999' : '#666';
        }
    },
    amt: {
        color: function(params) {
            const seriesModel = chart.getModel().getSeriesByIndex(params.seriesIndex);
            const mainLabelColor = seriesModel.getLabelTextColor(params.dataIndex);
            return mainLabelColor === '#000000' ? '#999' : '#666';
        }
    }
}

注意：getLabelTextColor是ECharts内部方法，功能稳定但存在版本变更风险，使用时需关注兼容性。

方法2：复刻ECharts的标签颜色计算逻辑 #

若担心内部方法的兼容性，可直接复刻ECharts源码中的颜色判断逻辑。ECharts采用符合WCAG标准的相对亮度计算法，具体实现如下：

// 计算颜色的相对亮度（复刻ECharts内部逻辑）
function getRelativeLuminance(hexColor) {
    const rgb = hexColor.replace(/^#/, '').match(/.{2}/g).map(val => parseInt(val, 16) / 255);
    const sRGB = rgb.map(val => {
        return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
    });
    return 0.2126 * sRGB[0] + 0.7152 * sRGB[1] + 0.0722 * sRGB[2];
}

// 获取ECharts自动选择的标签颜色
function getEChartsLabelColor(sectorColor) {
    const luminance = getRelativeLuminance(sectorColor);
    // ECharts默认阈值：相对亮度>0.5时用黑色，否则用白色
    return luminance > 0.5 ? '#000' : '#fff';
}

// 在标签配置中使用
formatter: (params) => {
    return `{name|${params.name}}\n{amt|${params.value.formatter(params.value.value)}} ({pct|${params.percent}}%)`;
},
rich: {
    name: {
        color: (params) => getEChartsLabelColor(params.color)
    },
    pct: {
        color: (params) => {
            const mainColor = getEChartsLabelColor(params.color);
            return mainColor === '#000' ? '#999' : '#666';
        }
    },
    amt: {
        color: (params) => {
            const mainColor = getEChartsLabelColor(params.color);
            return mainColor === '#000' ? '#999' : '#666';
        }
    }
}

该逻辑与ECharts源码完全一致，能保证和默认标签颜色的判断结果同步，且无内部方法的兼容性风险。

与手动实现的差异说明 #

你之前使用的0.299r + 0.587g + 0.114b是简易亮度计算公式，而ECharts采用的相对亮度计算更符合视觉感知的对比度要求，能精准匹配ECharts的默认行为。

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