ExtJs整合Echarts方法分享

PHP中文网 • 2025年3月8日 17:27:16 • 编程技术 • 阅读 2

本文主要和大家介绍了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 :   '
'        + ''        +'
档案调用次数表
'        +'

登录后复制’ + ‘

月份调用次数

‘, 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 的形式显示     show : true,     readOnly : true,     optionToContent : function(opt) {      var axisData = opt.xAxis[0].data;      var series = opt.series;      var table = '

登录后复制’ + ‘时间’ + ” + series[0].name + ” // + ” // + series[1].name // + ” + ”; for (var i = 0, l = axisData.length; i ‘ + ” + axisData[i] + ” + ” + series[0].data[i] + ” // + ” + series[1].data[i] // + ” + ”; } 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}{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 = ''   +'
'   + personName   + '档案调用情况表
'   +'

登录后复制’ + ‘

月份调用次数

‘; // if(monthData.length != data.length) // throw new Error(“数据条数不对，请检查！”); for (var i = 0; i ‘ +” + monthData[i] + ” + data[i] + ” } html += ”; document.getElementById(‘mainTable’).innerHTML = html;}