echarts 柱狀圖簡單示例

//提示：<script src="../../HBSettlementPublic/static/js/echarts.js"></script>  引用echarts.js
  //柱狀圖簡單示例
    function _initControls()
    {
    	_initPanel();
    }
    window.onload = function() {
		_initLineEcharts();
//		me.controller.loadPageData();
	}
    function _initPanel(){
    	me.linePanel = mx.containers.Panel({
			name : "linePanel",
			title : "",
			width : "100%",
			height : "100%",
			displayHead : false
		});
		me.linePanel.$body.css("overflow", "hidden");
		me.addControl(me.linePanel);
    }
    function _initLineEcharts() {
    	me.lineChart = echarts.init(me.linePanel.$body[0]);
		// 指定圖表的配置項和數據
		me.lineChartOption = {
			title : {
				text : '售電公司代理零售戶數量TOP10',
				textStyle:{fontSize:12} ,
				left:"center"
			},
			grid : {
				top : 35,
				bottom : 110,
				right : '5%',
				left : '16%'
			},
			tooltip : {
				trigger : 'axis',
				axisPointer : {
					type : 'shadow'
				},
				position : function(point, params, dom, rect, size) {
					return [ point[0], '10%' ];
				}
			},
			xAxis : [ {
				type : 'category',
				data : [ '售電用戶名稱1', '售電用戶名稱2', '售電用戶名稱3', '售電用戶名稱4','售電用戶名稱5', '售電用戶名稱6', '售電用戶名稱7', '售電用戶名稱8'],//橫座標名稱
				axisLabel : {
					interval : 0,
					rotate:30
				},
				axisTick : {
					alignWithLabel : true
				}
			} ],
			yAxis : [ {
				type : 'value',
				triggerEvent:true,
	            name: '數量'
			} ],
			series : [ {
				name : '數量',
				type : 'bar',
				stack : 'num',
				emphasis : {

				},
				itemStyle : {
					emphasis : {
						color : 'rgba(181,195,52,0.5)'
					},
					normal : {
						color : function(params) {
							var colorList = [  'blue','blue','blue','blue',
								                  'blue','blue','blue','blue',
								                  'blue','blue','blue','blue',
								                  'blue','blue','blue','blue' ];
							return colorList[params.dataIndex];
						}
					}
				},
				data : [ 10, 20, 30, 60, 20, 90, 10, 0, 0, 0, 0, 0 ]
				//橫座標對應數值
			} ]
		}
		me.lineChart.setOption(me.lineChartOption);
	}