echart标签设置不同颜色
时间: 2023-07-31 21:05:36 浏览: 69
多选标签 颜色改变
3星 · 编辑精心推荐
要设置Echarts中的标签不同颜色,可以使用formatter属性和富文本标签。下面是一个示例代码:
```javascript
option = {
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',
label: {
show: true,
position: 'top',
formatter: function(params) {
if (params.value > 100) {
return '{a|' + params.value + '}';
} else {
return '{b|' + params.value + '}';
}
},
rich: {
a: {
color: 'red'
},
b: {
color: 'green'
}
}
}
}]
};
```
在这个例子中,我们使用formatter属性将标签的值包裹在富文本标签中。如果数据点的值大于100,我们将使用红色标签,否则使用绿色标签。我们使用rich属性定义富文本标签的样式,包括颜色。
阅读全文