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);
	}
    
发布了10 篇原创文章 · 获赞 1 · 访问量 423

猜你喜欢

转载自blog.csdn.net/weixin_38919176/article/details/103805636