echarts象形图 电池图表

1.前端模拟假数据：（这里的数据来源你的后台）
batteryBarData:[{name:'数据1',value:2000,max:6000,},{name:'数据2',value:3000,max:6000,}]
2.html代码
<div id="batteryBarId"></div>
3.js代码
initBatteryBar(){
	let element = document.getElementId(‘batteryBarId’)；
	let nameArr=[], maxArr = [],  valueArr = [],
	//遍历循环数据拆分开
	batteryBarData.forEach( (item,index)=>{
		nameArr.push(item.name); 
		maxArr.push(item.max+10);
		valueArr.push(item.value);
	} )
	let option = {
		grid:{left:25,top:20,bottom:10,right:25},
		xAxis:{axisTick: {show:false},axisLabel:{show:false},data:nameArr},
		yAxis:{splitLine:{show:false},axisTick:{show:false},splitLine:{show:false},axisLabel:{show:false}},
		series:
		[
			{
				name:'圆柱外框顶部',
				type:'pictorialBar',
				symbolSize:[40,6],
				symbolOffest:[0,0],
				z:1,
				silent:true,
				symbolPosition:'end',
				data:[
				{name:'不一致',value:maxArr[0],itemStyle:{normal:{color:'#02869c'}}},
				{name:'一致',value:maxArr[1],itemStyle:{normal:{color:'#9b8012'}}
				]
			},
			{
				name:'圆柱外框底部',
				type:'pictorialBar',
				symbolSize:[40,6],
				symbolOffest:[0,7],
				z:1,
				silent:true,
				data:[
				{name:'不一致',value:maxArr[0],itemStyle:{normal:{color:'#02869c'}}},
				{name:'一致',value:maxArr[1],itemStyle:{normal:{color:'#9b8012'}}
				]
			},
			{
				name:'圆柱外框',
				type:'pictorialBar',
				symbol:'rect',
				symbolSize:[40,'100%'],
				symbolOffest:[0,4],
				zlevel:1,
				silent:true,
				//显示在图上数据
				label:{
					normal:{
							show:false,
							position：’inside‘,
							textStyle:{color:'#fff'},
							formatter:(params)=>{
								let p;
								p = valueArr[params.dataIndex] / batteryBarData[params.dataIndex].max *100;
								return p;
								}
					},
				},
				data:[
					{
					name:'不一致',
					value:maxArr[0],
					itemStyle:{
						normal:{
									color:{type:'linear',x:0,y:0,x2:1,y2:0,
									colorStops:[{offest:0,color:'rgba(0,234,255,0.4)'},						     {offest:0.2,color:'rgba(0,234,255,0.2)'},offest:0.5,color:'rgba(0,234,255,0.1)',{offest:0,color:'rgba(0,234,255,0.2)'},{offest:0,color:'rgba(0,234,255,0.4)'}],
									globalCoord:false,
									}
						}，
					},
				},
				{
					name:'不一致',
					value:maxArr[1],
					itemStyle:{
						normal:{
									color:{type:'linear',x:0,y:0,x2:1,y2:0,
									colorStops:[{offest:0,color:'rgba(255,164,50,0.4)'},						     {offest:0.2,color:'rgba(255,164,50,0.2)'},offest:0.5,color:'rgba(255,164,50,0.1)',{offest:0.8,color:'rgba(255,164,50,0.2)'},{offest:1,color:'rgba(255,164,50,0.4)'}],
									globalCoord:false,
									}
						}，
					},
				},
				]
			},
			{
				name:'圆柱顶部',
				type:'pictorialBar',
				symbolSize:[34,6],
				symbolOffest:[0,-3],
				z:3,
				silent:true,
				symbolPosition:'end',
				data:[{name:'不一致',value:valueArr[0],itemStyle:{normal:{color:'#30fffd'}}},
				  {name:'一致',value:valueArr[1],itemStyle:{normal:{color:'#ffc240'}}} ],
				
			},
		],
		
	},
	{
		name:'圆柱底部',
		type:'pictorialBar',
		symbolSize:[34,6],
		symbolOffest:[0,3],
		z:3,
		silent:true,
		data:[
			{name:'不一致1',value:100,itemStyle:{normal:{color:'#30fffd'}}},{name:'一致1',value:100,itemStyle:{normal:{color:'#ffc240'}}}
		],
		
   },
   {
	name:'圆柱'，
	type:'pictorialBar',
	symbol:'rect',
	symbolSize:[34,'100%'],
	symbolOffest:[0,0],
	z:2,
	data:[	{name:'不一致1',value:valueArr[0],itemStyle:{normal:{	color:{type:'linear',x:0,y:0,x2:1,y2:0,
									colorStops:[{offest:0,color:'rgba(48,255,253,0.8)'},						     {offest:0.2,color:'rgba(48,255,253,0.5)'},offest:0.5,color:'rgba(48,255,253,0.4)',{offest:0.8,color:'rgba(48,255,253,0.5)'},{offest:0,color:'rgba(48,255,253,0.8)'}],
									globalCoord:false,
									}}}},
	{name:'一致1',value:valueArr[1],itemStyle:{normal:{	color:{type:'linear',x:0,y:0,x2:1,y2:0,
									colorStops:[{offest:0,color:'rgba(255,111,55,0.8)'},						     {offest:0.2,color:'rgba(255,111,55,0.5)'},offest:0.5,color:'rgba(255,111,55,0.4)',{offest:0.8,color:'rgba(255,111,55,0.5)'},{offest:0,color:'rgba(255,111,55,0.8)'}],
									globalCoord:false,
									}}}},]
 };
 chart.setOption(option,true)
}


```