ECharts图表中如何实现换行文字不同颜色样式？

在ECharts中，可以通过使用富文本（rich text）来实现换行文字不同颜色样式的效果。富文本允许你在同一个文本块中设置不同的样式，包括颜色、字体大小、字体粗细等。

以下是一个简单的示例，展示如何在ECharts图表中实现换行文字不同颜色样式：

option = {
    title: {
        text: '富文本示例',
        subtext: '{a|第一行红色}\n{b|第二行蓝色}',
        subtextStyle: {
            rich: {
                a: {
                    color: 'red',
                    fontSize: 16
                },
                b: {
                    color: 'blue',
                    fontSize: 14
                }
            }
        }
    },
    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'
    }]
};

解释：

1. subtext: 这是副标题的文本内容。我们使用 \n 来实现换行。
2. subtextStyle: 这是副标题的样式配置。
3. rich: 这是富文本的配置对象。你可以在这里定义不同的样式类（如 a 和 b），然后在 subtext 中使用 {a|...} 和 {b|...} 来应用这些样式。

关键点：

• rich: 用于定义富文本样式。
• {a|...}: 在文本中使用 {a|...} 来应用 rich 中定义的 a 样式。
• \n: 用于实现换行。

其他应用场景：

你可以在 title、legend、axisLabel、series.label 等地方使用富文本来实现复杂的文本样式。

例如，在 series.label 中使用富文本：

series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar',
    label: {
        show: true,
        formatter: '{a|红色文字}\n{b|蓝色文字}',
        rich: {
            a: {
                color: 'red',
                fontSize: 16
            },
            b: {
                color: 'blue',
                fontSize: 14
            }
        }
    }
}]

通过这种方式，你可以在ECharts中灵活地控制文本的样式，实现换行文字不同颜色的效果。