一、效果图
二、代码
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 = '@' + valuelet 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]}}}]}
