ECharts图表中如何实现换行文本并分别设置上下行样式？

在ECharts中，如果你需要在图表中显示换行文本，并且希望分别设置上下行的样式，可以通过以下几种方式实现：

1. 使用 \n 进行换行

你可以在文本中使用 \n 来实现换行。然后，通过 rich 配置项来分别设置上下行的样式。

2. 使用 rich 配置项

rich 配置项允许你对文本的不同部分进行样式设置。你可以通过 rich 来分别设置上下行的样式。

示例代码

以下是一个示例，展示如何在ECharts中实现换行文本并分别设置上下行的样式：

option = {
    title: {
        text: '这是第一行\n这是第二行',
        textStyle: {
            fontSize: 14,
            color: '#333',
            rich: {
                a: {
                    fontSize: 18,
                    color: 'red',
                    lineHeight: 30
                },
                b: {
                    fontSize: 14,
                    color: 'blue',
                    lineHeight: 20
                }
            }
        },
        formatter: function (params) {
            return '{a|这是第一行}\n{b|这是第二行}';
        }
    },
    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'
    }]
};

解释

• text: '这是第一行\n这是第二行'：使用 \n 实现换行。
• rich：定义了两个样式 a 和 b，分别用于第一行和第二行。
• formatter：通过 formatter 函数，将文本分成两部分，并分别应用 a 和 b 样式。

3. 在 tooltip 中使用换行和样式

如果你希望在 tooltip 中实现换行并分别设置样式，可以使用类似的方法：

option = {
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            return '{a|这是第一行}\n{b|这是第二行}';
        },
        textStyle: {
            rich: {
                a: {
                    fontSize: 18,
                    color: 'red',
                    lineHeight: 30
                },
                b: {
                    fontSize: 14,
                    color: 'blue',
                    lineHeight: 20
                }
            }
        }
    },
    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'
    }]
};

总结

通过使用 \n 进行换行，并结合 rich 配置项，你可以在ECharts中实现换行文本并分别设置上下行的样式。这种方法适用于 title、tooltip 等需要显示文本的地方。