//提示:<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);
}
echarts 柱状图简单示例
猜你喜欢
转载自blog.csdn.net/weixin_38919176/article/details/103805636
今日推荐
周排行