echarts 柱状图


var dataX=[];// x轴数据
var dataYOne=[];// y轴数据 销售额
var dataYTwo=[];// y轴数据 盈利
//以下代码初始化执行
$(document).ready(function(){

//初始化表格样式
$('#dg').datagrid({  
rowStyler: function(index,row){
//表格字体
return 'font-size:50px;';
},
onLoadSuccess:function(data){
var row=data.rows;
if(row!=""&&row!=null){
for(var i in row){
if(row[i].userName!=null && row[i].userName!=""){
dataX.push(row[i].userName);
}else{
dataX.push("客户(未知)");
}

if(row[i].sales==null || row[i].sales==""){
dataYOne.push(0);
}else{
dataYOne.push(row[i].sales);
}
if(row[i].profit==null || row[i].profit==""){
dataYTwo.push(0);
}else{
dataYTwo.push(row[i].profit);

}
}
test();
}
}); 

}


function test(){
var myChart;
//配置echarts路径
require.config({  
   paths:{   
       'echarts' : '${pageContext.request.contextPath}/js/echarts' 
   }  
});
//使用echarts加载输在柱状图 
   require(  
   [  
       'echarts',  
       'echarts/chart/line' // 使用柱状图就加载bar模块,按需加载  (line是折线图,bar是柱状图在此加'echarts/theme/helianthus',)
   ],
   loadEcharts
);  
}

    function loadEcharts(ec,theme) {  
    // 基于准备好的dom,初始化echarts图表  
        myChart= ec.init(document.getElementById("childDiv"),theme);
        
      // 过渡
        /* myChart.showLoading({
            text: '正在努力的读取数据中...',
        }); */
        var option = {
        toolbox: {
                    show : true,
                    feature : {
                        dataView : {show: true, readOnly: false},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                tooltip: {
                    show: true
                },
                legend: {
                    data:['销售额',"盈利"]
                },
                xAxis : [
                    {
                        type : 'category',
                        data : dataX
                         //data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        "name":"销售额",
                        "type":"line",
                        "data":dataYOne
                        //"data":[5, 20, 40, 10, 10, 20]
                    },
                    {
                        "name":"盈利",
                        "type":"line",
                        "data":dataYTwo
                        //"data":[25, 5, 10, 40, 20, 10]
                    }
                ]
            };
      // 为echarts对象加载数据  
      myChart.clear();//旧数据清空
        myChart.setOption(option);   
    }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值