ExtJs整合的Echarts

由于Echarts不提供表格功能，想要实现上图下表，需要自己增加一个table标签。

ExtJs整合Echarts

从Echarts官网下载js文件通过import引用 新建一个页面，通过竖直放置的两个p排版，上方预留给Echarts，下方预留给table标签

initPanel : function() {
 if (this.panel) {
 return
 }
 
 var panel = new Ext.Panel({
 id : 'echart',
 html : '<p id="mainEchart" style="height:50%;border:1px solid #ccc;padding:10px;"></p>'
 + '<p 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; 
}

Echarts初始化和数据加载

官方声明一次性只能生成一个echarts，定义相关的样式，并且从后台查询数据提供给echarts

initData : function(id, personName, year) {
 this.id = id;
 var p = document.getElementById("mainEchart");
 var myChart = echarts.init(p);
 // 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)
 //表格的加载
}

表格数据的赋值

表格部分就是简单的html赋值，没什么好多讲的，注意拼接完后刷新一下html即可。 代码如下：

tableData : function(personName, monthData, data) {
 // 表格部分
 var html = '<p 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></p>';
 document.getElementById('mainTable').innerHTML = html;
}

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

javascript模块加载器是怎么运行的

怎样实现微信web端后退强制刷新