时间:2021-07-01 10:21:17 帮助过:52人阅读
由于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 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;
- }
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 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 = '<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;
- }
以上就可完成数据的联动,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。