ExtJs整合Echarts的示例代码

initPanel : function() { if (this.panel) {  return }  var panel = new Ext.Panel({  id : 'echart',  html :   '<div id="mainEchart" style="height:50%;border:1px solid #ccc;padding:10px;"></div>'        + '<div id="mainTable" style="position:relative;text-align:center;padding:10px;">'        +'<label for="mainTable"><h1>档案调用次数表</h1></label>'        +'<table id="content-table" border="1" style="width:100%;text-align:center;">'        + '<tr><th>月份</th><th>调用次数</th></tr>',  buttonAlign : 'center',  autoScroll : true,//允许滚动  bodyStyle : 'overflow-x:hidden; overflow-y:scroll'  //开启竖直滚动条，关闭水平滚动条 });  this.panel = panel; return this.panel; }

initData : function(id, personName, year) { this.id = id; var div = document.getElementById("mainEchart"); var myChart = echarts.init(div); // myChart.showLoading({ // text: "图表数据正在努力加载..." // }); this.myChart = myChart; // 初始化数据 var data = []; var yearStr = ""; var flag = false; var monthData = [];  var res = QueryData();//调用数据查询，涉及项目名，略  for (var i = 0; i < res.json.body.length; i++) {  var map = res.json.body[i];  monthData.push(map.MM);//月份  data.push(map.DYCS);//调用次数 } var options = {  arg : {   id : this.id  },  noDataLoadingOption : {   text : '暂无数据',   effect : 'bubble',   effectOption : {    effect : {     n : 0    }   }  },  title : {   text : personName + "的档案调用情况",   x : 'west'  },  tooltip : {   trigger : 'axis'  },  legend : {   data : ['调用次数']  },  toolbox : {   show : true,   feature : {    mark : {     show : true    },    dataView : {    //重写dataView    //在切换视图的时候能够以<table>的形式显示     show : true,     readOnly : true,     optionToContent : function(opt) {      var axisData = opt.xAxis[0].data;      var series = opt.series;      var table = '<table style="width:100%;text-align:center" border="1"><tbody><tr>'        + '<td>时间</td>'        + '<td>'        + series[0].name + '</td>'        // + '<td>'        // + series[1].name        // + '</td>'        + '</tr>';      for (var i = 0, l = axisData.length; i < l; i++) {       table += '<tr>' + '<td>' + axisData[i]         + '</td>' + '<td>'         + series[0].data[i] + '</td>'         // + '<td>' + series[1].data[i]         // + '</td>'         + '</tr>';      }      table += '</tbody></table>';      return table;     }    },    magicType : {     show : true,     type : ['line', 'bar']    },    restore : {     show : true    },    saveAsImage : {     show : true    }   }  },  calculable : true,  xAxis : [{     type : 'category',     data : monthData    }],  yAxis : [{     type : 'value',     splitArea : {      show : true     }    }],  series : [{   name : '调用次数',   type : 'bar',   barWidth : 35,   data : data,   itemStyle : {//修改柱状图的颜色并在顶部显示数值    normal : {     color : '#3575a8',      label : {      show : true,      position : 'top',      formatter : '{c}'//'{b}/n{c}'     }    }   }  }] }; myChart.setOption(options, true); myChart.on('click', function eConsole(param) {   }); this.tableData(personName, monthData, data) //表格的加载}

tableData : function(personName, monthData, data) { // 表格部分 var html = '<div id="mainTable" style="position:relative;text-align:center;padding:10px;">'   +'<label for="mainTable"><h1>'   + personName   + '档案调用情况表</h1></label>'   +'<table id="content-table" border="1" style="width: 100%;text-align: center;">'   + '<tr style="height: 30px;text-align:center;"><th>月份</th><th>调用次数</th></tr>'; // if(monthData.length != data.length) // throw new Error("数据条数不对，请检查！"); for (var i = 0; i < data.length; i++) {  html += '<tr style="height: 30px;text-align: center;">'     +'<td id="data-month-'+i+'">'     + monthData[i]     + '</td><td id="data-value-'+i+'">'     + data[i]     + '</td></tr>' } html += '</table></div>'; document.getElementById('mainTable').innerHTML = html;}