参考下面Deno
https://www.makeapie.com/editor.html?c=xgNHRfHRfA
var getmydmc=['数学','语文','英语'];//数据点名称
var getmyd=[86.25,90.26,77.88];//学生满意度
var getmydzd =[];//学生满意度100%
for (let i = 0; i < getmyd.length; i++) {
getmydzd.push(100)
}
option = {
grid: {
show:true,
width:300,
height:350,
left: '170',
right: '75',
bottom: '3%',
top: '3%',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
},
formatter: function(params) {
return '及格率<br>'+ params[0].name + ': ' + params[0].value+'%'
}
},
xAxis: {
show: false,
type: 'value'
},
yAxis: [{
type: 'category',
inverse: true,
axisLabel: {
textStyle: {
color: '#666666',
fontSize: '14',
lineHeight:20,
},
// 调整左侧文字的3个属性,缺一不可
verticalAlign: 'bottom',
align:'right',
//调整文字上右下左
padding: [0,-80,15,0],
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
data: getmydmc
}, {
type: 'category',
inverse: true,
axisTick: 'none',
axisLine: 'none',
show: true,
axisLabel: {
textStyle: {
color: '#333333',
fontSize: '14'
},
// 调整右侧数值文字的3个属性,缺一不可
padding: [0, 0, 35, -130],
formatter: '{value}%'
},
data:getmyd
}],
series: [{
name: '值',
type: 'bar',
zlevel: 1,
itemStyle: {
normal: {
barBorderRadius: 5,
color: '#4E7BFE'
},
},
barWidth: 15,
data: getmyd
},
{
name: '背景',
type: 'bar',
barWidth: 15,
barGap: '-100%',
data: getmydzd,
itemStyle: {
normal: {
color: 'rgba(103,150,253,0.3)',
barBorderRadius: 5,
}
},
},
]
};
效果图如下: