由于Echarts不提供表格功能，想要实现上图下表，需要自己增加一个table标签。
ExtJs整合Echarts
从Echarts官网下载js文件通过import引用 新建一个页面，通过竖直放置的两个div排版，上方预留给Echarts，下方预留给table标签
initPanel : function() { if (this.panel) { return } var panel = new Ext.Panel({ id : 'echart', html : '<div></div>' + '<div>' +'<label for="mainTable"><h1>档案调用次数表</h1></label>' +'<table>' + '<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 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><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 = '<div>' +'<label for="mainTable"><h1>' + personName + '档案调用情况表</h1></label>' +'<table>' + '<tr><th>月份</th><th>调用次数</th></tr>'; // if(monthData.length != data.length) // throw new Error("数据条数不对，请检查！"); for (var i = 0; i < data.length; i++) { html += '<tr>' +'<td>' + monthData[i] + '</td><td>' + data[i] + '</td></tr>' } html += '</table></div>'; document.getElementById('mainTable').innerHTML = html; }
以上就可完成数据的联动，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: