echarts 横着显示的柱状图

echarts 横着显示的柱状图

引入echarts的js

$(function(){
	getdwkhqykpdata("dwkhqykp");
})

/**
 * 获得数据并显示echarts
 * idname : 显示位置id的名称
 */
function getdwkhhgldata(idname){
	

	var xzdata =  [20,26,50,56,59,80,103,120,150,165,168,190,201];
	var yzdata = ['石家庄市', '保定市', '承德市', '张家口市', '秦皇岛市', '唐山市','邯郸市',
		'沧州市','衡水市','邢台市','廊坊市','辛集市','定州市'];
	dwkhqykphglecharts(xzdata,yzdata,idname);
	
}


/**
 * 显示横过来的柱状图，
 * xzdata : x轴显示的数据
 * yzdata ： y轴显示的数据
 * idname : 显示位置id的名称
 */
function dwkhqykphglecharts(xzdata,yzdata,idname){
	
	var myChart = echarts.init(document.getElementById(idname));
	
	option = {
		    tooltip: {
		        trigger: 'axis',
		        axisPointer: {
		            type: 'shadow'
		        }
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis: {
		        type: 'value',
		        boundaryGap: [0, 0.01],
		        position: 'top',
		        axisLine:{
	            	lineStyle:{
	            		color:"#fff",
	            		width:1,
	            	}
	            }
		    },
		    yAxis: {
		        type: 'category',
		        data: yzdata,
		        axisLine:{
	            	lineStyle:{
	            		color:"#fff",
	            		width:1,
	            	}
	            }
		    },
		    series: [
		        {
		            type: 'bar',
		            data: xzdata,  
		            label: {   //设置柱状图上显示  对应值
		                show: true,
		                position: 'right',
		                color:'#fff'
		            },
		             itemStyle: {
		                normal: {
		                    color: function(params) {   // 设置前三个颜色不一样
		                        var num = params.value;
		                        var djg = params.dataIndex;   //第几个数
		                        var retcoler = "#345edc";
		                        if(djg>9){
		                            retcoler = '#ef6b59';
		                        }
		                        return retcoler
		                    },
		                    barBorderRadius: [0, 8, 8, 0] // 设置柱状图圆角（顺时针左上，右上，右下，左下）
		                },
		                
		            },
		        },
		    ]
		};
	
	myChart.setOption(option);
}

显示效果：