业扩平均时长02echarts category配置项内容和展示

配置项如下
      var avgTimeLongs = ['15']; // 蓝色长度
var standardTimeLongs = ['20']; // 红色虚线框
var standardValues = ['20']; // 灰色阴影长度(阴影值为标准值与实际值之中的最大值)
// 指定图表的配置项和数据
var xdata = ['低压居民'];
 option = {
	grid:{
        bottom: '2%',
        top:'2%',
        left:'32%',
        right:'15%',
	},
	tooltip:{ // 悬浮窗口
	    trigger:'axis',
	    axisPointer:{
	        type:"none"
	    },
	    formatter:function(params){
	     var temp = params[0].name;
	         temp += "</br>"+params[1].seriesName+":"+params[1].data;
	         temp += "</br>"+params[2].seriesName+":"+params[2].data;
	      return temp;
	    }
	},
	xAxis : {
		min : 0,
		max: standardValues,
		show : false
	},
	yAxis : [{
	    type : 'category',
		min : 0,
		data : xdata,
		show : true,
		axisTick : {
			length : 0
		},
		axisLine : {
			show : false,
			lineStyle : {
				color : '#000',
				width : 5
			}
		},
		axisLabel : {
			interval:0,  
			textStyle : {
				align : 'left',
				color:'#000',
				fontSize:12*0.8,
				padding:[0,0,38,10], //x轴文字偏移 
			},
			formatter:function(params){
			    return params;
			}
		}
	},{
		show : false,
		data : xdata
	}],
	series : [{
		type : 'bar',
		name : '阴影值',
		xAxisIndex : 0,
		yAxisIndex : 0,
		zlevel : 0,
		barWidth:60/35*12,
		barGap : '-100%',
		barCategoryGap : 0,
		label : {
			normal : {
						show : true,
						position : 'right',
						formatter : function(params) {
							var sc = avgTimeLongs[params.dataIndex];
							if(sc=="--"){
								sc = " "+sc;
							}
							return ' {b| '+ sc +'}'+'{c|}';
						},
						textStyle : {
							color : 'rgb(25,25,25)',
							fontSize : 12,
							align:'center',
							rich: {
								b: {
		                            color:'#58E1EA',
		                            width:28,
		                            align:'right', //右对齐
		                            fontSize : 12,
		                            fontWeight:'bold',
		                            padding:[30,0,0,-50]
		        	            }
		        	        }
						}
						}
		},
		itemStyle : {
			normal : {
				color : 'rgb(209,209,209)',
				barBorderRadius:4
			}
		},
		data : standardValues,
	},{
		type : 'bar',
		name : '标准值',
		xAxisIndex : 0,
		yAxisIndex : 0,
		zlevel : 99,
		barWidth:60/35*12,
		barGap : '-100%',
		barCategoryGap : 0,
		itemStyle : {
			normal : {
				color : 'rgba(255,255,255,0)',
				barBorderColor : 'red',
				barBorderWidth : 3,
				barBorderRadius : 4,
				borderType : "dotted"
			}
		},
		data : standardTimeLongs,
	},{
		type : 'bar',
		name : '指标值',
		xAxisIndex : 0,
		yAxisIndex : 0,
		barWidth:60/35*12,
		barGap : '-100%',
		itemStyle : {
			normal : {
				barBorderRadius : 4,
				color : function(params) {
					var colorList = ['rgb(94,189,211)'];
					return colorList[params.dataIndex];
				}
			}
		},
		data : avgTimeLongs,
		
	}]
};





    
截图如下