博客讲述了如何在Echarts图表中，针对特定标签（如'E:56/100G'）仅给数字部分设置颜色，以匹配UI设计稿效果。博主分享了实现这一功能的代码片段，涉及到`formatter`和`textStyle`属性的使用。
ui给出的效果图如下：
自己做出的效果如下：
核心代码如下：
var hardDisks = [{driver : "C:", usage : 80, capacity : 100},
{driver : "D:", usage : 55, capacity : 100},
{driver : "E:", usage : 66, capacity : 100}
]
var usedArray = [80, 55, 66];
var allArray = [100, 100, 100];
var devicesOneGraphChart = echarts.init ( $ ( "#devicesOneGraph" )[ 0 ] );
var option = {grid: {
show : false,
left: '10%',
right: "20%",
bottom: 0,
top: 0,
containLabel: true
},
xAxis: {
type: "value",
show: false
},
yAxis: {
type: "category",
show: false,
data: ["C:", "D:", "E:"]
},
series: [ {
type: 'bar',
barWidth : 5,
label: {
normal: {
show: false
}
},
itemStyle: {
normal: {
color: function(params) {
if(params.value <= 80){
return "#35b34a";
}else{
return "#ff4848";
}
}
}
},
z: 10,
data: usedArray
}, {
type: 'bar',
barWidth : 5,
itemStyle: {
normal: {
color: 'rgba(114, 116, 125, 0.2)'
}
},
barGap: '-100%',
label: {
normal: {
formatter: function(data) {
var result = "";
result += data.name + " " + hardDisks[data.dataIndex].usage.toFixed(0) + " /" + hardDisks[data.dataIndex ].capacity.toFixed(0) + "G";
return result;
},
show: true,
position: 'right',
textStyle: {
fontFamily : "微软雅黑",
fontSize : 10,
color: '#688499'
}
}
},
data: allArray
}],
}
devicesOneGraphChart.setOption ( option );
现在不知道标签"E:56/100G"这段文字如何像设计稿那样只给“56”设置颜色。
求教，谢谢
1010
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
