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) } ,
