echarts 柱状图 横向 类似于进度条

由于项目需要，参考各种资料画出来的，时间紧迫，比较简陋。主要方便后面自己查阅参考。后续更新优化

option = {
		textStyle:{
// 			fontSize: arr.initHeight,
			color: 'red'//字体颜色
		},
		tooltip: {
			trigger: "axis",  
			textStyle:{
				// fontSize: arr.initHeight,
				color: 'red'//字体颜色
			},
// 			formatter: function (params) {
// 				return params[0].name + ': ' + params[0].value+"%";
// 			},
		},
		
// 		grid: {
// 			x: 90,
// 			y: 120,
// 			x2: 60,
// 			y2: 120
// 			},//直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。
		yAxis: {
		  //  type: 'category',
			axisLabel: {
				textStyle: {
					color: 'red',
				// 	fontSize: arr.initHeight,
				}
			},
		  data: ['q去','qre','qwer','ere'],
			axisTick:{       //x轴刻度线
				show:false
			},
			splitLine: {     //网格线
				show: false
			},
			axisLine:{		//坐标轴线
				show:false
			}
			
		},
		xAxis: {
		  //  type: 'value',
// 			show:false,
			max: 50,
			min:0,
		},
		series: [{
			name: '可用',
			type: 'bar',
			stack:'使用情况',
			data:[12,23,11,33],
			barWidth : 10,//柱图宽度
			itemStyle:{
				// color: function(params) { 
    //                 var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB' ]; 
    //                 return colorList[params.dataIndex] 
    //             },
				 barBorderRadius: [50, 0, 0, 50] // 统一设置四个角的圆角大小
			},
			markPoint : {
				symbol:'pin',//标记类型
				symbolSize: 10,//图形大小
				itemStyle: {
					normal: {
						borderColor: 'red',
						borderWidth: 1,            // 标注边线线宽，单位px，默认为1
						label: {
							show: true,
							fontSize: 14
						}
					   }
					  },
					data :[{value:10,xAxis:50,yAxis:0},{value:10,xAxis:50,yAxis:1},{value:10,xAxis:50,yAxis:2},{value:10,xAxis:50,yAxis:3}]//配置项 
				}
		},
		{
			name: '不可用',
			type: 'bar',
			stack:'使用情况',
			data: [28,17,29,7],
			itemStyle:{
				color:"rgba(255,0,0,.1)",
				 barBorderRadius: [0, 0, 0, 0]// 统一设置四个角的圆角大小
			}
		}
		]
	};