用ECharts画多柱子柱状图（可点击）

其实用ECharts画柱子还是挺简单的，多去官网看看官方文档，就理解了。
columLabel是多柱子的名字。columName 是横坐标。bgColorList 是柱子的颜色。arr 是每个柱子的值。list 是后台传过来的各个柱子的值，但是要经过处理赋值给arr ，赋值的方法也不只这一种，当然也可以直接赋值。columnValue 是每个柱子的数据（颜色、宽度、数值等）。

	$(function () {
	        initData();
	    });
     	
     	// 初始化各个数据
     	function initData(){
	     	var columLabel = ${dept};
	     	var columName = ${times};
	     	var bgColorList = ['#FBB730', '#31BDF2','#6197fb'];
	     	var list = ${list};
	     	var columnValue = [];
	     	
	     	for (var i = 0; i < columLabel.length; i++) {
	     		var arr = [];
	     		var columnDataValue = null;
	     		// 为每个柱子赋值
	     		for (var j = 0; j < columName.length; j++) {
	     			var a = list[i + (j * columLabel.length)];
		                arr.push(a);
		            }
		     	columnDataValue = {
		            barWidth: 15,//柱状条宽度
		            name:columLabel[i],
		            type:'bar',
		            itemStyle: {
		                normal: {
		                    show: true,//鼠标悬停时显示label数据
		                    barBorderRadius: [10, 10, 10, 10],//柱形图圆角，初始化效果
		                    color: bgColorList[i]
		                }
		            },
		            label: {
		                normal: {
		                    show: true, //显示数据
		                    position: 'top'//显示数据位置 'top/right/left/insideLeft/insideRight/insideTop/insideBottom'
		                }
		            },
		            data:arr
		        };
		        columnValue.push(columnDataValue);
	        }
	     	var startTime = "${startTime}";
	     	var endTime = "${endTime}";
	     	var text = "";
	     	if(startTime == endTime){
	     		text = text + startTime;
	     	}else{
	     		text = text + startTime + "---" + endTime;
	     	}
	     	text = text + " 登陆人数统计";
	     	buildChart(text,columLabel,columName,columnValue);
     	}
     	
     	// 开始画柱子
     	function buildChart(text,columLabel,columName,columnValue){
	        var myChart = echarts.init(document.getElementById('main'));
	        // 指定图表的配置项和数据
	        var option = {
	            title: {
	            	// 标题
	                text: text,
	                x:'center',
	                textAlign:'left'
	            },
	            tooltip: {
	            	trigger: 'axis',
			        axisPointer : {            
			            type : 'shadow'        
			        }
	            },
	            toolbox: {
		            show : true,
		            feature : {
		                saveAsImage : {show: true}
		            }
		        },
	            legend: {
	                data:columLabel,
	                y:'bottom' //图例说明文字设置
	            },
	            grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '8%',
			        containLabel: true
			    },
	            xAxis: {
	            	// 横坐标
	            	min: 0,
	            	type: 'category', 
	               data : columName,
	    		    axisLabel:{
	    		    	interval:0,
	    			    rotate:22.5,//倾斜度 -90 至 90 默认为0
	    			    margin:4,
	    			    textStyle:{
	    			    	fontWeight:"bolder",
	    			        color:"#000000",
	    			        fontSize:15
	    			    }
	    		    }            
	            },
	            yAxis: [{
	            	// 纵坐标
	                min: 0,
	                type: 'value',
	                splitArea: {show: false}
	            }],
	            label: {
	                normal: { //显示bar数据
	                    show: true,
	                    position: 'top'
	                }
	            },
	            series: columnValue
	        };
	        myChart.on('click', function (params) {
	        	//为三个柱子设置点击事件
				var name = params.name;
				if(params.seriesName == '一部'){
               		//“一部”柱子的点击事件
				}
				if(params.seriesName == '二部'){
               		//“二部”柱子的点击事件
				}
				if(params.seriesName == '三部'){
               		//“三部”柱子的点击事件
				}
            });
	        // 使用刚指定的配置项和数据显示图表。
	        myChart.setOption(option);
        }

最终效果图如下（每个柱子均可点击触发点击事件）：

图中的各项数据我都是由后台传过来的，在这里要提醒一下，如果后台传过来的数据是中文，可能会报错，在这里我是在后台用单引号括起来将其解决的。

		lists.add("'一部'");
		lists.add("'二部'");
		lists.add("'三部'");
		request.setAttribute("dept", lists);

当然，以上数据你如果对哪个不是很理解，都可以试着改一下，这样可能会映像深刻一点（我当初就是这么过来的T_T）。