ECharts图表中如何实现文字换行并设置上下行不同颜色？

在ECharts中，可以通过使用富文本（rich text）来实现文字换行，并为上下行设置不同的颜色。以下是一个示例，展示如何在ECharts图表中实现这一功能：

示例代码

option = {
    title: {
        text: 'ECharts 文字换行及颜色设置示例',
        left: 'center'
    },
    tooltip: {},
    xAxis: {
        data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {},
    series: [{
        name: '示例数据',
        type: 'bar',
        data: [5, 20, 36, 10, 10],
        label: {
            show: true,
            formatter: function(params) {
                return `{a|第一行}\n{b|第二行}`;
            },
            rich: {
                a: {
                    color: 'red',
                    fontSize: 16
                },
                b: {
                    color: 'blue',
                    fontSize: 14
                }
            }
        }
    }]
};

解释

1. formatter 函数：在 label 中使用 formatter 函数来定义文本内容。通过 \n 实现换行。

2. 富文本（rich text）：在 rich 对象中定义不同的样式。a 和 b 是两个样式名称，分别对应 formatter 中的 {a|...} 和 {b|...}。

3. 颜色设置：在 rich 中为 a 和 b 分别设置不同的颜色（color）和字体大小（fontSize）。

结果

• 第一行文字将显示为红色，字体大小为16。
• 第二行文字将显示为蓝色，字体大小为14。

其他注意事项

• 你可以根据需要添加更多的样式定义，例如字体粗细、背景颜色等。
• 如果需要在其他组件（如 title、legend 等）中使用富文本，也可以使用类似的方法。

通过这种方式，你可以在ECharts中灵活地控制文本的显示效果，包括换行和颜色设置。