const top5List = [ { "usageRate": "100.00", "ip": "38号混泥土" }, { "usageRate": "99.36", "ip": "56号混泥土" }, { "ip": "78号混泥土", "usageRate": "80" }, { "ip": "99号混泥土", "usageRate": "70" }, { "ip": "38号混泥土", "usageRate": "60" } ] let xaxis = top5List.map((item) => item.ip); let yaxis = top5List.map((item) => item.usageRate); let maxYaxis = top5List.map((item) => 100); const color = ['#0193FB', '#0193FB', '#FFFFFF']; option = { //你的代码 backgroundColor: 'rgba(0, 0, 0)', // backgroundColor: 'rgba(0, 19, 86, 0.8)', grid: { show: true, borderColor: 'rgba(56,145,255, 0.4)', left: '4%', right: '11.5%', bottom: '5%', top: '9%', containLabel: true, }, legend: { show: false, icon: 'roundRect', right: 40, itemWidth: 12, itemHeight: 12, itemGap: 5, textStyle: { fontSize: 12, color: '#9EEAFF', }, }, tooltip: { show: true, trigger: 'axis', confine: true, padding: 0, backgroundColor: 'rgba(1,1,1,0.5)', axisPointer: { type: "line", lineStyle: { color: '#6CC0FF', type: 'solid', }, }, borderWidth: 0, padding: 0, backgroundColor: "rgba(0,24,89,0.5)", formatter: function (params) { let str1 = ` ` return str1 + htmlStr + str2; }, }, xAxis: { boundaryGap: false, axisTick: { show: false }, axisLine: { show: false }, splitLine: { lineStyle: { color: 'rgba(56,145,255, 0.4)', width: 1, type: 'solid', }, }, axisLabel: { show: true, //axisLabel的显示间隔interval字段,可以设置成 0 强制显示所有标签 interval: 0, fontFamily: 'PingFangSC-Medium', fontSize: 14, color: '#9EEAFF', padding: [3, 0, 0, 0], formatter: '{value}%', }, splitArea: { show: false, areaStyle: { color: ['rgba(56,128,255,0)', 'rgba(56,128,255, 0.1)'], }, }, }, yAxis: [ { name: '', nameTextStyle: { color: '#B3D2FF', fontSize: 12, padding: [10, 30, 0, 0], }, min: 0, axisLine: { lineStyle: { color: 'rgba(56,145,255, 0.4)', width: 1, }, }, axisTick: { show: false }, splitLine: { lineStyle: { color: 'rgba(56,145,255, 0.4)', width: 1, type: 'solid', }, }, axisLabel: { // formatter: function (params) { // //只显示横线后面的ip // var ind = params&¶ms.lastIndexOf('-'); // if(ind != -1){ // return params.substring(ind + 1) // }else{ // return params // } // }, margin: 7, fontFamily: 'PingFangSC-Medium', fontSize: 14, color: '#9EEAFF', padding: [0, 0, 0, 0], }, data: xaxis.reverse(), } ], series: [ { barWidth: 12, name: '', type: 'bar', itemStyle: { barBorderRadius: [10, 10, 10, 10], color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [ { offset: 0, color: color[0] }, { offset: 0.6, color: color[1] }, { offset: 1, color: color[2] } ], global: false // 缺省为 false }, }, label: { show: true, position: 'right', textStyle: { color: '#ffffff', fontSize: 14 }, formatter: function (e) { return e.data + '%'; }, }, data: yaxis.reverse() }, { barWidth: 12, name: '', type: 'bar', barGap: '-100%', itemStyle: { barBorderRadius: [10, 10, 10, 10], shadowColor: '#3892FF', // shadowOffsetX: 3, // shadowOffsetY: -7, opacity: 0.2 }, data: maxYaxis, zlevel: -1, global: false // 缺省为 false } ] };

进度条top5