一、效果图
二、代码
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 ]
}
}
}
]
}