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

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

示例代码

option = {
    title: {
        text: 'ECharts 示例',
        subtext: '文字换行并设置不同颜色',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: '示例数据',
            type: 'pie',
            radius: '50%',
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ],
            label: {
                formatter: function(params) {
                    return `{a|${params.name}}\n{b|${params.value}}`;
                },
                rich: {
                    a: {
                        color: 'red',
                        fontSize: 16,
                        lineHeight: 20
                    },
                    b: {
                        color: 'blue',
                        fontSize: 14,
                        lineHeight: 20
                    }
                }
            }
        }
    ]
};

解释

1. formatter 函数：在 label 中使用 formatter 函数来定义文本的显示格式。通过 \n 实现换行。

2. 富文本（rich text）：使用 rich 属性来定义不同部分的样式。在这个例子中，a 和 b 是两个不同的样式块，分别用于显示 name 和 value。

3. a 和 b 样式：a 样式用于显示 name，颜色为红色，字体大小为16px；b 样式用于显示 value，颜色为蓝色，字体大小为14px。

4. lineHeight：设置行高，确保换行后的文本对齐。

结果

在这个示例中，图表的每个数据项的名称和值会显示为两行，名称行显示为红色，值行显示为蓝色。

其他注意事项

• 你可以根据需要调整 rich 中的样式，比如字体大小、颜色、行高等。
• 如果需要在其他类型的图表中使用类似的富文本效果，可以参考类似的配置方法。

通过这种方式，你可以在ECharts中灵活地控制文本的显示样式，实现复杂的文本效果。