drawmonthqualified(){
this.monthqualified = echarts.init(document.getElementById('monthqualified'));
this.monthqualified.setOption({
grid: {
top: "15%",
left:"20%",
right:'20%',
bottom: "0%" //也可设置left和right设置距离来控制图表的大小
},
xAxis: {
show: false, //是否显示x轴
type: 'value'
},
yAxis: {
type: 'category',
inverse:true, //让y轴数据逆向
axisLabel: {
show: true,
textStyle: {
color: '#666' //y轴字体颜色
},
formatter: function(value, index) {
return [
'{title|' + value + '} '
].join('\n');
},
//定义富文本标签
rich: {
title: {
color: '#fff',
fontSize:14
}
}
},
splitLine: {show: false}, //横向的线
axisTick: {show: false}, //y轴的端点
axisLine: {show: false}, //y轴的线
data: ['合格率']
},
series: [
{
name: '合格率',
type: 'bar',
itemStyle: {
normal: {
barBorderRadius: 16,
color: '#2DF290',
}
},
label: {
normal: {
show: true,
position: 'right',
color: '#2DF290',
fontSize: 14,
}
},
barWidth: 16,
data: [60]
},
{
// 分隔
type: 'pictorialBar',
symbolRotate: '-28',
itemStyle: {
normal: {
color: '#fff',
// color: 'rgba(1, 12, 38, 0.4)',
},
},
symbolRepeat: 'fixed',
symbolMargin: 6,
symbol: 'rect',
symbolClip: true,
symbolSize: [3, 15],
symbolPosition: 'start',
symbolOffset: [10, 0],
data: [60],
z: 66,
animationEasing: 'elasticOut',
},
{
name: '外框',
type: 'bar',
itemStyle: {
normal: {
barBorderRadius: 30,
color: 'rgba(255, 255, 255, 0.14)' //rgba设置透明度0.14
}
},
barGap: '-100%',
z: 0,
barWidth: 16,
data: [100]
}
]
},true)
},