在ECharts中，数据标签的样式定制可以通过label配置项中的rich属性实现，该属性支持为不同的文本片段定义独立的样式规则，包括颜色、字体大小、行高等，能够轻松实现上下行文字不同颜色的效果。
实现核心思路
要实现上下行文字不同颜色，核心是利用label.formatter回调函数拼接上下行文本，同时通过label.rich定义不同行的样式类名，为不同类名设置不同的color属性即可。
关键配置项说明
- formatter：用于自定义标签的显示内容，支持返回包含rich样式引用的字符串
- rich：定义富文本样式块，每个键对应一个样式类名，可配置颜色、字体等属性
- color：设置文本颜色，支持十六进制、rgb、颜色名称等格式
完整实现示例
以下是一个柱状图的示例，数据标签第一行显示数值，颜色为#1890ff，第二行显示单位，颜色为#999999：
// ECharts初始化配置
const option = {
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: [120, 200, 150, 80, 70],
label: {
// 开启数据标签
show: true,
// 标签位置，顶部显示
position: 'top',
// 自定义标签内容
formatter: function(params) {
// 第一行显示数值，引用rich中的value样式
// 第二行显示单位，引用rich中的unit样式
return '{value|' + params.value + '}n{unit|单位：个}';
},
// 定义富文本样式
rich: {
value: {
color: '#1890ff', // 第一行文字颜色
fontSize: 14,
fontWeight: 'bold',
lineHeight: 20
},
unit: {
color: '#999999', // 第二行文字颜色
fontSize: 12,
lineHeight: 18
}
}
}
}
]
};
// 初始化图表并应用配置
const chartDom = document.getElementById('chart');
const myChart = echarts.init(chartDom);
myChart.setOption(option);
注意事项
如果上下行文字需要更复杂的样式差异，比如第一行加粗、第二行倾斜，只需要在rich对应的样式块中添加fontWeight、fontStyle等属性即可。另外，formatter中换行需要使用n转义字符，否则无法正确分行显示。
当图表容器大小变化时，建议调用myChart.resize()方法重新渲染图表，避免数据标签位置偏移。如果需要在标签中添加图标，也可以在rich样式中配置backgroundColor为图标地址，实现更丰富的展示效果。