echarts柱状类似进度条样式

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_41619796/article/details/88661612

先看看效果图：

var arr={}
arr.fhId = "demo_echarts_fh";//负荷的id
arr.fhArr=[
	{"name":"10kv金羊线","value":"10"},
	{"name":"10kv金海线","value":"20"},
	{"name":"10kv金东线","value":"30"},
	{"name":"10kv金澳线","value":"45"},
	{"name":"10kv金叶线","value":"55"},
]
initEchartsFh(arr);

function initEchartsFh(arr){
	var fhArr = arr.fhArr;
	var data1 = [];//可用数据
	var data2 = [];
	var data3 = [];//不可用数据
	var data4 = [];//配置项
	for(i in fhArr){
		data1.push(fhArr[i].value);
		data2.push(fhArr[i].name);
	}
	for(m in data1){
		data3.push(100-parseInt(data1[m]));
	}
	var nowNum = 0;
	for(n in data1){
		var nowA = {};
		nowA.value = data1[n]+'%';
		nowA.xAxis = nowNum;
		nowA.yAxis = 110;
		data4.push(nowA);
		nowNum++;
	}
	var myChart = echarts.init(document.getElementById(arr.fhId));
	var option = {
		textStyle:{
			fontSize: arr.initHeight,
			color: '#fff'//字体颜色
		},
		tooltip: {
			trigger: "axis",  
			textStyle:{
				fontSize: arr.initHeight,
				color: '#fff'//字体颜色
			},
			formatter: function (params) {
				return params[0].name + ': ' + params[0].value+"%";
			},
		},
		
		grid: {
			x: 90,
			y: 120,
			x2: 60,
			y2: 120
			},//直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。
		xAxis: {
			axisLabel: {
				textStyle: {
					color: '#fff',
					fontSize: arr.initHeight,
				}
			},
		  data: data2,
			axisTick:{       //x轴刻度线
				show:false
			},
			splitLine: {     //网格线
				show: false
			},
			axisLine:{		//坐标轴线
				show:false
			}
			
		},
		yAxis: {
			show:false,
			max: 110,
			min:0,
		},
		series: [{
			name: '可用',
			type: 'bar',
			stack:'使用情况',
			data:data1,
			barWidth : 30,//柱图宽度
			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: [0, 0, 50, 50] // 统一设置四个角的圆角大小
			},
			markPoint : {
				symbol:'pin',//标记类型
				symbolSize: 1,//图形大小
				itemStyle: {
					normal: {
						borderColor: '#fff',
						borderWidth: 1,            // 标注边线线宽，单位px，默认为1
						label: {
							show: true,
							fontSize: arr.initHeight
						}
					   }
					  },
					data :data4//配置项 
				}
		},{
			name: '不可用',
			type: 'bar',
			stack:'使用情况',
			data: data3,
			itemStyle:{
				color:"rgba(255,255,255,.2)",
				 barBorderRadius: [50, 50, 0, 0]// 统一设置四个角的圆角大小
			}
		}]
	};
	myChart.setOption(option);
	chart3 = myChart;
	myChart.on('click', function (params) { 
//		//电站负荷闪动
		powerLoad("946be6fc249e40a8a63e97e98b1c576d");
		alert('负荷点击事件');
		console.log(params);
		console.log(params.name+':'+params.value+'%');
	})
}