1. 程式人生 > >用ECharts畫多柱子柱狀圖(可點選)

用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)。