ExtJs整合的Echarts

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

这次给大家带来ExtJs整合的Echarts，使用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 < 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    //在切换视图的时候能够以
月份 调用次数


的形式显示     show : true,     readOnly : true,     optionToContent : function(opt) {      var axisData = opt.xAxis[0].data;      var series = opt.series;      var table = '
'        + ''        + ''        // + ''        + '';      for (var i = 0, l = axisData.length; i < l; i++) {       table += '' + '' + ''         // + ''         + '';      }      table += '时间 '        + series[0].name + ' '        // + series[1].name        // + '
' + axisData[i]         + ' '         + series[0].data[i] + ' ' + series[1].data[i]         // + '
';      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 < data.length; i++) {  html += ''     +'' } html += '月份 调用次数
'     + monthData[i]     + ' '     + data[i]     + '
'; document.getElementById('mainTable').innerHTML = html;}