Echarts 换行文字上下部分不同颜色的设置方法

在使用 Echarts 进行数据可视化的过程中，我们常常会遇到一些个性化的需求，比如设置换行文字上下部分不同颜色。这一功能可以有效突出重点信息，提升图表的美观度与可读性。接下来，我们就详细探讨一下具体的设置方法。

要明确 Echarts 本身并没有直接提供一个简单的属性来实现换行文字上下部分不同颜色。但借助富文本语法以及一些巧妙的处理，我们可以达到预期的效果。

对于 Echarts 中的文本标签，如 tooltip、axisLabel 等，可以使用 formatter 函数来进行文本格式化。在 formatter 函数里，我们可以通过 HTML 标签来构建富文本。例如，对于 tooltip 的 formatter，可以这样写：

tooltip: {
    formatter: function(params) {
        let text = params.name;
        let splitText = text.split('\n');
        if (splitText.length > 1) {
            return `<span style="color: red;">${splitText[0]}</span><br><span style="color: blue;">${splitText[1]}</span>`;
        }
        return text;
    }
}

上述代码中，先将文本按换行符进行拆分。如果文本存在换行，即拆分后的数组长度大于 1，就分别为上下两部分设置不同的颜色，这里上半部分设置为红色，下半部分设置为蓝色。

在 axisLabel 中设置换行文字不同颜色的原理类似：

xAxis: {
    axisLabel: {
        formatter: function(value) {
            let splitValue = value.split('\n');
            if (splitValue.length > 1) {
                return `<span style="color: green;">${splitValue[0]}</span><br><span style="color: yellow;">${splitValue[1]}</span>`;
            }
            return value;
        }
    }
}

这里以 x 轴标签为例，将换行后的上下部分文字分别设置为绿色和黄色。

需要注意的是，使用这种方法时，要确保 Echarts 环境支持 HTML 标签渲染。如果文本换行情况较为复杂，还需要进一步优化逻辑，以确保不同场景下都能正确显示不同颜色的换行文字。

通过上述方法，我们能够轻松实现 Echarts 中换行文字上下部分不同颜色的设置，让数据可视化效果更加出色，更好地满足各种业务场景下的展示需求。