echarts 柱状图

柱状图

初始化柱状图 JS方法:

var unitsAbnormalVol;
var  htmlFs = $("html").css("font-size").replace("px", "") * 1;
function initSpecialLeft(){
	var url = CONTEXTPATH  + '/widescreen/special/left';
	var fromData = {'orgCode':orgCode};
	$.ajax({
        type:"POST",
        url:url,
        dataType:'JSON',
        contentType:'application/json',
        data:JSON.stringify(fromData),
        success:function(data){
	        	var colors1=new Array("#337EF4","#0B2040");
	        barEcharts(unitsAbnormalVol,"unitsAbnormalVol",colors1,data.unitsAbnormalVolList);
        		
}

function barEcharts(obj,echartsId,colors,dtoList){
	var cityName = [];
	var _data = [];
	if(dtoList.length>0){
		for(var i=0;i<dtoList.length;i++){
			 if(dtoList[i].orgCode == "00"){
				 jQuery("#"+echartsId+"_3D").text(dtoList[i].count);
			 }else{
				 cityName.push(dtoList[i].orgName);
				 _data.push(dtoList[i].count==0?'':dtoList[i].count);
			 }
		}
	}
	if (!!obj) {
		obj.dispose();
    }
	obj = e4.init(document.getElementById(echartsId));
	var option = {
			grid:{
				right:'8.1%',
				top:'8%'
			},
		    xAxis: {
		        type: 'category',
		        data: cityName,
		        axisLine:{
		            lineStyle:{
		                color:'#747C8E'
		            }
		        },
		        axisTick:{
		            show:false
		        },
		        axisLabel:{
		            textStyle:{
		                fontSize:40/36*htmlFs
		            }
		        }
		    },
		    yAxis: {
		        type: 'value',
		        minInterval:3,
		        axisLine:{
		            lineStyle:{
		                color:'#747C8E'
		            }
		        },
		        splitArea: {
		            show: true,
		            areaStyle:{
		            	color:['#0D1C3C','#112C49']
		            }
		        },
		        axisTick:{
		            show:false
		        },
		        axisLabel:{
		            textStyle:{
		                fontSize:30/36*htmlFs
		            }
		        },
		        splitLine:{
		            show:false
		        }
		        ,offset:0
		        
		    },
		    series: [
		    {
		        type: 'bar',
		        barWidth: 58/36*htmlFs,
		        stack:'jly',
		        itemStyle: {
		            normal: {
		                barBorderRadius: [30/36*htmlFs, 30/36*htmlFs, 0, 0],
		                color: new e4.graphic.LinearGradient(
		                    0, 0, 0, 1,
		                    [
								{offset: 0, color: colors[0]},
		                        {offset: 1, color: colors[1]}
		                    ]
		                ),
		                opacity: 0.85
		            }
		        },
		         label:{
		          show:true,
		          position:'insideTop',
		          color:'#FFF',
		          fontSize:40/36*htmlFs
		        },
		        data: _data
		    }
		]
		};
	obj.setOption(option);
}

猜你喜欢

转载自blog.csdn.net/qq_31806719/article/details/85007367