extjs 插入echarts柱状图（附带一个饼图）

效果图如下：

[javascript] view plain copy

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;
};

extjs 插入echarts柱状图（附带一个饼图）

猜你喜欢