实现eCharts的 不同柱子不同样式 或系列下的 不同css样式 的匹配 或者 实现 不同柱子添加不同的说明文字
通过params参数判断,使用不同样式
return ' {name4|固定字符1' + value + '固定字符2%}'
其中 name4 是css样式名, value是变量, 其他固定字符实是说明文字
eCharts内置的params包含的参数有:dataIndex, seriesName, name,value等
![](https://img-blog.csdnimg.cn/20210917160604936.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAc3RldmVfU0pG,size_18,color_FFFFFF,t_70,g_se,x_16)
实际代码如下:
{
// 总量-增加
name: '增加',
type: 'bar',
stack: '总量',
label: {
//设置柱子上的数字的 标签的文字
show: true,
position: 'inside',
textStyle: {
color: '#000',
fontWeight: 'bolder',
},
formatter: function (params) {
let value = 0
if (params.value == undefined) {
value = 0.0
} else {
value = parseFloat(params.value).toLocaleString(undefined, {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})
}
if (params.name == 'AA') {
return '{name|' + value + '}'
} else if (params.name == 'BB') {
return '{name2|' + value + '}'
} else if (params.name == 'CC') {
return '{name3|' + value + '}'
} else {
return '{name4|' + value + '}'
}
},
rich: {
name: {
color: '#fff',
fontWeight: 'bold',
align: 'center',
backgroundColor: '#984807',
// lineHeight:60,
padding: [2, 3, 2, 3],
},
name2: {
color: '#fff',
fontWeight: 'bold',
align: 'center',
backgroundColor: '#1F497D',
// lineHeight:60,
padding: [2, 3, 2, 3],
},
name3: {
color: '#fff',
fontWeight: 'bold',
align: 'center',
backgroundColor: '#009900',
// lineHeight:60,
padding: [2, 3, 2, 3],
},
name4: {
color: '#000',
fontWeight: 'bold',
align: 'center',
},
},
},
itemStyle: {
//设置柱子的通用颜色样式
normal: {
color: function (params) {
if(params.name == 'AA'){
return '#984807'
}else if(params.name == 'BB'){
return '#1F497D'
}else if(params.name == 'CC'){
return '#009900'
}else{
return colorLinearBlue
}
},
},
},
data: this.data,
},