圆角,颜色渐变,x轴为项+百分比
配置如下:
var caseStateNum = [100, 80, 80, 50, 70, 110, 130, 80, 70, 50, 45, 60, 60];
var total = 0;
var caseStateRatio = [];
caseStateNum.map(function(d ,i){
total += d;
})
caseStateNum.map(function(d,i){
caseStateRatio.push(parseInt(d/total*100)+'%');
})
var option = {
backgroundColor: '#051c71',
tooltip: {
trigger: "axis",
backgroundColor: 'rgb(11,11,81)',
padding: [15,30],
extraCssText: 'box-shadow: 0px 0px 25px 5px rgb(41, 95, 159) inset;border-radius:10px'
},
grid: {
top: '15%',
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: {
type: "category",
axisTick: {
show: false
},
axisLabel: {
interval: 0,
color: '#ddd',
fontSize: 14,
formatter: function(value, index){
return value+'\n'+caseStateRatio[index];
}
},
axisLine: {
lineStyle: {
color: "#5475c8"
}
},
data: ["一类", "二类", "三类", "四类",
"五类", "六类", "七类", "八类", "九类",
"十类", "十一类", "十二类", "十三类"]
},
yAxis: [{
type: "value",
name: "单位:(件)",
min: 0,
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.2)'
}
},
splitNumber: 5,
axisLabel: {
show: true,
textStyle: {
color: "#ddd"
}
},
nameTextStyle: {
color: "#ddd"
},
axisLine: {
lineStyle: {
color: "#5475c8"
}
}
}],
series: [{
name: "数量",
type: "bar",
barWidth: 15,
label: {
normal: {
show: false,
position: "insideRight"
}
},
itemStyle: {
normal: {
// color: "rgb(249, 153, 139)",
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: 'rgb(253,146,166)'},
{offset: 0.5, color: 'rgb(255, 162, 156)'},
{offset: 1, color: 'rgb(249, 153, 139)'}
]
),
barBorderRadius: [8, 8, 8, 8]
}
},
data: caseStateNum
}]
};
效果如下: