配置项如下
var datas = [{
"value": 60,
"name": "申请立案"
},
{
"value": 50,
"name": "无法核查"
},
{
"value": 40,
"name": "已进入法律程库"
},
{
"value": 30,
"name": "重复舆情"
},
{
"value": 20,
"name": "咨询类"
},
]
var colorList=['#C467FF','#2CAF70 ','#FFA23F','#625AFF','#4B8BFF'];
var maxArr = (new Array(datas.length)).fill(100);
option = {
backgroundColor: "#fff",
grid: {
left:40,
right: 40,
bottom: 20,
top: 100,
containLabel: true
},
tooltip: {
trigger: 'item',
axisPointer: {
type: 'none'
},
formatter: function(params) {
return params[0].name + ' : ' + params[0].value
}
},
xAxis: {
show: false,
type: 'value'
},
yAxis: [{
type: 'category',
inverse: true,
axisLabel: {
show: true,
align: 'right',
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
data: datas.map(item => item.name)
}, {
type: 'category',
inverse: true,
axisTick: 'none',
axisLine: 'none',
show: true,
axisLabel: {
textStyle: {
color: '#3196fa',
fontSize: '12'
},
formatter: '{value}%'
},
data: datas.map(item => item.value)
}],
series: [{
name: '值',
type: 'bar',
zlevel: 1,
itemStyle: {
normal: {
barBorderRadius: 30,
color: (params) => {
return colorList[params.dataIndex]
}
},
},
barWidth: 20,
data: datas
},
{
name: '背景',
type: 'bar',
barWidth: 20,
barGap: '-100%',
data: maxArr,
itemStyle: {
normal: {
color: '#ededed',
barBorderRadius: 30,
}
},
},
]
};