ExtJs整合Echarts的示例代码
由于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; }
以上就可完成数据的联动,希望对大家的学习有所帮助,也希望大家多多支持我们。
您可能感兴趣的文章:
- ExtJs使用总结(非常详细)
- ExtJS 学习专题(一) 如何应用ExtJS(附实例)
- ExtJS Ext.MessageBox.alert()弹出对话框详解
- 学习ExtJS Window常用方法
- Extjs Ext.MessageBox.confirm 确认对话框详解
- ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport
- 学习ExtJS Panel常用方法
赞 (0)