extjs 插入echarts柱状图（附带一个饼图）
来源：互联网 发布：淘宝代运营排名 编辑：程序博客网 时间：2024/06/05 14:32
效果图如下：
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;}; 2 0
- extjs 插入echarts柱状图（附带一个饼图）
- ECharts系列 - 柱状图（条形图）实例
- Echarts（一、柱状图）
- 引入ECharts（柱状图）
- ECharts的学习（一）：制作一个简单的柱状图
- 一点点前端代码，使用ECharts插入柱状图
- echarts之（2）柱状图
- ECHARTS的基本使用：柱状图、折线图、饼图等
- echarts动态加载数据，显示柱状图，饼图图表
- Echarts 教学 渐变 柱状图 折线图 嵌套 饼图标签
- Echarts图标使用实例(柱状图与饼图)
- ECharts系列 - 柱状图（条形图）实例一
- ECharts系列 - 柱状图（条形图）实例一
- ECharts系列 - 柱状图（条形图）实例一
- ECharts系列 - 柱状图（条形图）实例一
- Echarts柱状图
- echarts-柱状图
- echarts 柱状图
- 应对电商大促峰值的九个方法
- StreamingContext实例化过程
- Xcode7 安装Alcatraz 插件
- compileSdkVersion和appcompat-v7关系研究
- 判断网络状态
- extjs 插入echarts柱状图（附带一个饼图）
- 一点一点学ASP.NET之基础概念——委托
- sdfasdf
- 推荐一个免费的论文查重检测软件WriteCheck
- cJSON学习笔记（一）
- 党史学者
- Spark Streaming 作业调度流程
- Androin学习笔记十九：7种形式的Android Dialog使用举例
- Xcode6中添加pch文件
