extjs 插入echarts柱状图(附带一个饼图)

效果图如下:


var ecfaultlevel = Ext.create(
        'Ext.panel.Panel',
        {
            title : '事件级别',
            items : [ {
                xtype:'panel',
                html : '<div id="faultlevel" style="width: 680px;height: 272px;"></div>',
            listeners : {
                afterrender : function() {
                    /*chartstart*/
                    var overTimeChart = echarts.init(document
                            .getElementById("faultlevel"));
                    
                    var dataMap = {};
                    var piearray=new Array();
                    var piearraycount=0;
                    
                    /*piestart*/
                    Ext.Ajax.request( {
                        url : 'faultGroupByFaultLevel.action',
                        method : 'post',
                        success : function(response,options) {
                            var result = Ext.JSON.decode(response.responseText);
                            for (var i = 0; i < result.root.length; i++) {
                                var faultpandectdto=result.root[i].maxLevel;
                                var faultpanfaultNum=result.root[i].faultNum;
                                if("5"==faultpandectdto){//通知
                                    piearray[piearraycount] =result.root[i];
                                }
                                
                                if("10"==faultpandectdto){//一般
                                    piearray[piearraycount] =result.root[i];
                                }
                                
                                if("15"==faultpandectdto){//重要
                                    piearray[piearraycount] =result.root[i];
                                }
                                
                                if("20"==faultpandectdto){//紧急
                                    piearray[piearraycount] =result.root[i];
                                }
                                piearraycount++;
                            }
                            
                            var pieArrayLevel=new Array();
                            pieArrayLevel[0]="5";
                            pieArrayLevel[1]="10";
                            pieArrayLevel[2]="15";
                            pieArrayLevel[3]="20";
                            piearray = getAddZeroLevel(pieArrayLevel,piearray);
                            dataMap.dataTI = dataFormatter({
                                // max : 25000,
                                2005: [4854.33, 1658.19, 3340.54],//
                                2004: [4092.27, 1319.76, 2805.47],//
                                2003: [3435.95, 1150.81, 2439.68],//
                                2002: piearray//实时饼图数据
                            });
                            
                        }
                    });
                    /*pieend*/
                    
                    /*load datachart start*/
                    Ext.Ajax.request( {
                    url : 'faultLevelRealTime.action',
                    method : 'post',
                    success : function(response,options) {
                        var result = Ext.JSON.decode(response.responseText);
                        
                        //新建一个实时的数组存储实时通知数据信息
                        var  realDataGDPAdversion=new Array();
                        var realDataGDPAdversioncount=0;
                        
                        var  realDataGDPAComme=new Array();
                        var realDataGDPACommecount=0;
                        
                        var  realDataGDPAImpoert=new Array();
                        var realDataGDPAImpoertcount=0;
                        
                        var  realDataGDPJinJi=new Array();
                        var realDataGDPJinJicount=0;
                        
                        
                        var dayarray = new Array();
                        var weekarray = new Array();
                        var montharray = new Array();
                        for (var i = 0; i < result.root.length; i++) {
                            var faultpandectdto=result.root[i].maxLevel;
                            var faultpanfaultNum=result.root[i].faultNum;
                            if(i==0){
                                dayarray = result.root[i].daylist;
                                weekarray = result.root[i].weeklist;
                                montharray = result.root[i].monthlist;
                            }
                            if("5"==faultpandectdto){//通知
                                realDataGDPAdversion[realDataGDPAdversioncount] = result.root[i];
                                realDataGDPAdversioncount++;
                            }
                            
                            if("10"==faultpandectdto){//一般
                                realDataGDPAComme[realDataGDPACommecount] = result.root[i];
                                realDataGDPACommecount++;
                            }
                            
                            if("15"==faultpandectdto){//重要
                                realDataGDPAImpoert[realDataGDPAImpoertcount] = result.root[i];
                                realDataGDPAImpoertcount++;
                            }
                            
                            if("20"==faultpandectdto){//紧急
                                realDataGDPJinJi[realDataGDPJinJicount] = result.root[i];
                                realDataGDPJinJicount++;
                            }
                        }
                        var realDataGDPJinJiTemp = new Array();
                        realDataGDPJinJiTemp[0]="服务器";
                        realDataGDPJinJiTemp[1]="存储";
                        realDataGDPJinJiTemp[2]="网络设备";
                        realDataGDPJinJiTemp[3]="安全设备";
                        
                        realDataGDPJinJi = getAddZero(realDataGDPJinJiTemp,realDataGDPJinJi);
                        realDataGDPAImpoert= getAddZero(realDataGDPJinJiTemp,realDataGDPAImpoert);
                        realDataGDPAComme= getAddZero(realDataGDPJinJiTemp,realDataGDPAComme);
                        realDataGDPAdversion= getAddZero(realDataGDPJinJiTemp,realDataGDPAdversion);
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        /*处理一天的数据进行赋值*/
                        var  dayDataGDPAdversion=new Array();
                        var dayDataGDPAdversioncount=0;
                        
                        var  dayDataGDPAComme=new Array();
                        var dayDataGDPACommecount=0;
                        
                        var  dayDataGDPAImpoert=new Array();
                        var dayDataGDPAImpoertcount=0;
                        
                        var  dayDataGDPJinJi=new Array();
                        var dayDataGDPJinJicount=0;
                        
                        for (var i = 0; i < dayarray.length; i++) {
                            var faultpandectdto=dayarray[i].maxLevel;
                            var faultpanfaultNum=dayarray[i].faultNum;
                            if("5"==faultpandectdto){//通知
                                dayDataGDPAdversion[dayDataGDPAdversioncount] = dayarray[i];
                                dayDataGDPAdversioncount++;
                            }
                            
                            if("10"==faultpandectdto){//一般
                                dayDataGDPAComme[dayDataGDPACommecount] = dayarray[i];
                                dayDataGDPACommecount++;
                            }
                            
                            if("15"==faultpandectdto){//重要
                                dayDataGDPAImpoert[dayDataGDPAImpoertcount] = dayarray[i];
                                dayDataGDPAImpoertcount++;
                            }
                            
                            if("20"==faultpandectdto){//紧急
                                dayDataGDPJinJi[dayDataGDPJinJicount] = dayarray[i];
                                dayDataGDPJinJicount++;
                            }
                        }
                        dayDataGDPAdversion = getAddZero(realDataGDPJinJiTemp,dayDataGDPAdversion);
                        dayDataGDPAComme = getAddZero(realDataGDPJinJiTemp,dayDataGDPAComme);
                        dayDataGDPAImpoert = getAddZero(realDataGDPJinJiTemp,dayDataGDPAImpoert);
                        dayDataGDPJinJi = getAddZero(realDataGDPJinJiTemp,dayDataGDPJinJi);
                        
                        
                        /*处理一周的数据进行赋值*/
                        var  weekDataGDPAdversion=new Array();
                        var weekDataGDPAdversioncount=0;
                        
                        var  weekDataGDPAComme=new Array();
                        var weekDataGDPACommecount=0;
                        
                        var  weekDataGDPAImpoert=new Array();
                        var weekDataGDPAImpoertcount=0;
                        
                        var  weekDataGDPJinJi=new Array();
                        var weekDataGDPJinJicount=0;
                        
                        for (var i = 0; i < weekarray.length; i++) {
                            var faultpandectdto=weekarray[i].maxLevel;
                            var faultpanfaultNum=weekarray[i].faultNum;
                            if("5"==faultpandectdto){//通知
                                weekDataGDPAdversion[weekDataGDPAdversioncount] = weekarray[i];
                                weekDataGDPAdversioncount++;
                            }
                            
                            if("10"==faultpandectdto){//一般
                                weekDataGDPAComme[weekDataGDPACommecount] = weekarray[i];
                                weekDataGDPACommecount++;
                            }
                            
                            if("15"==faultpandectdto){//重要
                                weekDataGDPAImpoert[weekDataGDPAImpoertcount] = weekarray[i];
                                weekDataGDPAImpoertcount++;
                            }
                            
                            if("20"==faultpandectdto){//紧急
                                weekDataGDPJinJi[weekDataGDPJinJicount] = weekarray[i];
                                weekDataGDPJinJicount++;
                            }
                        }
                        
                        weekDataGDPAdversion = getAddZero(realDataGDPJinJiTemp,weekDataGDPAdversion);
                        weekDataGDPAComme = getAddZero(realDataGDPJinJiTemp,weekDataGDPAComme);
                        weekDataGDPAImpoert = getAddZero(realDataGDPJinJiTemp,weekDataGDPAImpoert);
                        weekDataGDPJinJi = getAddZero(realDataGDPJinJiTemp,weekDataGDPJinJi);
                        
                        /*处理一月的数据进行赋值*/
                        var  monthDataGDPAdversion=new Array();
                        var monthDataGDPAdversioncount=0;
                        
                        var  monthDataGDPAComme=new Array();
                        var monthDataGDPACommecount=0;
                        
                        var  monthDataGDPAImpoert=new Array();
                        var monthDataGDPAImpoertcount=0;
                        
                        var  monthDataGDPJinJi=new Array();
                        var monthDataGDPJinJicount=0;
                        
                        for (var i = 0; i < montharray.length; i++) {
                            var faultpandectdto=montharray[i].maxLevel;
                            var faultpanfaultNum=montharray[i].faultNum;
                            if("5"==faultpandectdto){//通知
                                monthDataGDPAdversion[monthDataGDPAdversioncount] = montharray[i];
                                monthDataGDPAdversioncount++;
                            }
                            
                            if("10"==faultpandectdto){//一般
                                monthDataGDPAComme[monthDataGDPACommecount] = montharray[i];
                                monthDataGDPACommecount++;
                            }
                            
                            if("15"==faultpandectdto){//重要
                                monthDataGDPAImpoert[monthDataGDPAImpoertcount] = montharray[i];
                                monthDataGDPAImpoertcount++;
                            }
                            
                            if("20"==faultpandectdto){//紧急
                                monthDataGDPJinJi[monthDataGDPJinJicount] = montharray[i];
                                monthDataGDPJinJicount++;
                            }
                        }
                        
                        monthDataGDPAdversion = getAddZero(realDataGDPJinJiTemp,monthDataGDPAdversion);
                        monthDataGDPAComme = getAddZero(realDataGDPJinJiTemp,monthDataGDPAComme);
                        monthDataGDPAImpoert = getAddZero(realDataGDPJinJiTemp,monthDataGDPAImpoert);
                        monthDataGDPJinJi = getAddZero(realDataGDPJinJiTemp,monthDataGDPJinJi);
                        
                        
                        
                        
                        dataMap.dataEstate = dataFormatter({
                            // max : 3600,
                            2005:monthDataGDPAImpoert,//当月重要
                            2004: weekDataGDPAImpoert,//本周重要
                            2003: dayDataGDPAImpoert,//当天重要
                            2002: realDataGDPAImpoert//实时重要
                        });
                        dataMap.dataFinancial = dataFormatter({
                            // max : 3200,
                            2005:monthDataGDPAComme,//当月一般
                            2004:weekDataGDPAComme,//本周一般
                            2003: dayDataGDPAComme,//当天一般
                            2002: realDataGDPAComme//实时一般
                        });
                        dataMap.dataGDP = dataFormatter({
                            // max : 60000,
                            2005: monthDataGDPAdversion,//当月通知的数据
                            2004: weekDataGDPAdversion,//本周通知的数据
                            2003: dayDataGDPAdversion,//当天通知的数据
                            2002:  realDataGDPAdversion//实时通知
                        });
                        dataMap.dataSI = dataFormatter({
                            // max : 26600,
                            2005: monthDataGDPJinJi,//本月紧急
                            2004: weekDataGDPJinJi,//本周紧急
                            2003: dayDataGDPJinJi,//当天紧急
                            2002: realDataGDPJinJi//实时紧急
                        });
                        
                        
                        
                        option = {
                                baseOption: {
                                    timeline: {
                                        axisType: 'category',
                                        autoPlay: true,
                                        playInterval: 1000,
                                        data: [
                                                '实时', {
                                                    value: '当天',
                                                    tooltip: {
                                                        formatter: '一般达到一个高度'
                                                    },
                                                    symbol: 'diamond',
                                                    symbolSize: 16
                                                },
                                                '本周', {
                                                    value: '当月',
                                                    tooltip: {
                                                        formatter: function(
                                                            params) {
                                                            return params.name + '紧急达到又一个高度';
                                                        }
                                                    },
                                                    symbol: 'diamond',
                                                    symbolSize: 18
                                                },
                                            ]
                                    },
                                
                                    tooltip: {},
                                    legend: {
                                        x: 'right',
                                        data: ['通知', '一般', '重要', '紧急' ],
                                        selected: {
                            '紧急': true
                        }
                                    },
                                    calculable: true,
                                    grid: {
                                        top: 80,
                                        bottom: 100
                                    },
                                    xAxis: [{
                                        'type': 'category',
                                        'axisLabel': {
                                            'interval': 0
                                        },
                                        'data': ['服务器', '存储', '网络设备', '安全设备',
                                        ],
                                        splitLine: {
                                            show: false
                                        }
                                    }],
                                    yAxis: [{
                                        type: 'value',
                                        name: '数量(个)'
                                    }],
                                    series: [{
                                        name: '通知',
                                        type: 'bar'
                                    }, {
                                        name: '一般',
                                        type: 'bar'
                                    }, {
                                        name: '重要',
                                        type: 'bar'
                                    }, {
                                        name: '紧急',
                                        type: 'bar'
                                    }, {
                                        name: '总数占比',
                                        type: 'pie',
                                        center: ['75%', '30%'],
                                        radius: '28%'
                                    }]
                                },
                                options: [
                    {
                        title: {text: '实时宏观显示'},
                        series: [
                            {data: dataMap.dataGDP['2002']},
                            {data: dataMap.dataFinancial['2002']},
                            {data: dataMap.dataEstate['2002']},
                            {data: dataMap.dataSI['2002']},
                            {data: dataMap.dataTI['2002']}
                        ]
                    },
                    {
                        title : {text: '当天宏观显示'},
                        series : [
                            {data: dataMap.dataGDP['2003']},
                            {data: dataMap.dataFinancial['2003']},
                            {data: dataMap.dataEstate['2003']},
                            {data: dataMap.dataSI['2003']}
                        ]
                    },
                    {
                        title : {text: '本周宏观显示'},
                        series : [
                            {data: dataMap.dataGDP['2004']},
                            {data: dataMap.dataFinancial['2004']},
                            {data: dataMap.dataEstate['2004']},
                            {data: dataMap.dataSI['2004']}
                        ]
                    },
                    {
                        title : {text: '当月宏观显示'},
                        series : [
                            {data: dataMap.dataGDP['2005']},
                            {data: dataMap.dataFinancial['2005']},
                            {data: dataMap.dataEstate['2005']},
                            {data: dataMap.dataSI['2005']}
                        ]
                    }
                ]
                                };
                                        overTimeChart.setOption(option);
                    
                    /*chartend*/
                        
                    },
                    failure : function() {
                        alert("加载错误");
                    }
                });
                    /*load datachart end*/
                    function dataFormatter(obj) {
                        var pList = ['通知', '一般', '重要', '紧急'
                        ];
                        var temp;
                        for (var year = 2002; year <= 2005; year++) {
                            var max = 0;
                            var sum = 0;
                            temp = obj[year];
                            for (var i = 0, l = temp.length; i < l; i++) {
                                max = Math.max(max, temp[i]);
                                sum += temp[i];
                                obj[year][i] = {
                                    name: pList[i],
                                    value: temp[i]
                                }
                            }
                            obj[year + 'max'] = Math.floor(max / 100) * 100;
                            obj[year + 'sum'] = sum;
                        }
                        return obj;
                    }
                        
                }}}]
            
            });
                    

function getTotalNumber(tzarr){
var countsss=0;
for(var i=0;i<tzarr.length;i++){
    countsss+=tzarr[i];
}
return countsss;
}


/*将数据补零*/
function getAddZero(equipmentNameArr,tArr){
var nmb=new Array();
var countarray=0;
for(var j=0;j<equipmentNameArr.length;j++){
    var ttt = equipmentNameArr[j];
    var kkk=0;
    for(var k =0;k<tArr.length;k++){
        var objectKkk = tArr[k].name;
        var objectnumber= tArr[k].faultNum;
        if(ttt == objectKkk){
            nmb[countarray] = objectnumber;
            countarray++;
        }else{
            kkk++;
        }
    }
    if(kkk==tArr.length){
        nmb[countarray] = 0;
        countarray++;
    }
    
}
return nmb;
};

/*将数据补零*/
function getAddZeroLevel(equipmentNameArr,tArr){
var nmb=new Array();
var countarray=0;
for(var j=0;j<equipmentNameArr.length;j++){
    var ttt = equipmentNameArr[j];
    var kkk=0;
    for(var k =0;k<tArr.length;k++){
        var objectKkk = tArr[k].maxLevel;
        var objectnumber= tArr[k].faultNum;
        if(ttt == objectKkk){
            nmb[countarray] = objectnumber;
            countarray++;
        }else{
            kkk++;
        }
    }
    if(kkk==tArr.length){
        nmb[countarray] = 0;
        countarray++;
    }
    
}
return nmb;
};


  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值