一、效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/93e86885f0b84716a76e9ae84a4f4d96.png)
二、代码
let option = {
grid: {
top: '8%',
bottom: -20,
right: 20,
left: 20,
containLabel: true
},
xAxis: {
show: false
},
yAxis: [
{
triggerEvent: true,
show: true,
inverse: true,
data: getArrByKey(data, 'name'),
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
inside: true,
color: 'white',
bottom: 15,
fontSize: 12,
itemStyle: {
normal: {
fontFamily: 'PingFangSC, PingFang SC'
}
},
padding: [0, 0, 6, 0],
align: 'left',
verticalAlign: 'bottom',
formatter: function (value, index) {
let aVal = '@' + value
let parts = aVal.split('@')
return `{title|${parts[0]}}{unit|${parts[1]}}`
},
rich: {
title: {
width: 6,
height: 6,
backgroundColor: '#fff',
borderRadius: 100,
margin: [0, 12, 0, 0]
},
unit: {
padding: [0, 0, 0, 4]
}
}
}
},
{
triggerEvent: true,
show: true,
inverse: true,
data: getArrByKey(data, 'name'),
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
margin: 0,
interval: 0,
inside: true,
padding: [0, 0, 5, 0],
color: 'white',
textStyle: {
normal: {
fontFamily: 'Voltage'
}
},
align: 'right',
verticalAlign: 'bottom',
formatter: function (value, index) {
let aa = data[index].value + '@G'
let parts = aa.split('@')
return `{fontSize|${parts[0]}}{unit|${parts[1]}}`
},
rich: {
fontSize: {
fontSize: 15
},
unit: {
fontSize: 12,
color: 'white',
padding: [5, 0, 0, 5]
}
}
}
}
],
series: [
{
type: 'bar',
showBackground: true,
barMinWidth: '5',
backgroundStyle: {
opacity: 0.1,
color: '#4D88FE'
},
yAxisIndex: 0,
data: data,
barWidth: '3px',
barCategoryGap: '0.3',
itemStyle: {
normal: {
color: '#0090ff',
borderRadius: [5, 5, 5, 5]
}
}
}
]
}