ECharts图表数据标签如何实现上下行文字不同颜色样式？

在ECharts中，可以通过配置 label 的 rich 属性来实现数据标签中上下行文字的不同颜色样式。rich 属性允许你为文本的不同部分设置不同的样式。

以下是一个示例，展示如何实现上下行文字不同颜色的效果：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        label: {
            show: true,
            formatter: function(params) {
                // 使用 rich 属性设置不同行的样式
                return `{a|${params.value}}\n{b|${params.name}}`;
            },
            rich: {
                a: {
                    color: 'red',  // 第一行文字颜色
                    fontSize: 16,
                    fontWeight: 'bold'
                },
                b: {
                    color: 'blue', // 第二行文字颜色
                    fontSize: 12
                }
            }
        }
    }]
};

解释：

1. formatter: 在 formatter 中，我们使用 \n 来分隔上下两行文字，并使用 {a|...} 和 {b|...} 来标记不同的文本部分。
2. rich: 在 rich 属性中，我们为 a 和 b 分别设置了不同的样式。a 对应第一行文字，b 对应第二行文字。

结果：

• 第一行文字（params.value）会显示为红色，字体大小为16，加粗。
• 第二行文字（params.name）会显示为蓝色，字体大小为12。

你可以根据需要调整颜色、字体大小、字体粗细等样式属性。