Echarts怎么在ExtJs中使用

Echarts怎么在ExtJs中使用？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

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" ></div>'         + '<div id="mainTable" >'         +'<label for="mainTable"><h2>档案调用次数表</h2></label>'         +'<table id="content-table" border="1" >'         + '<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  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" >'    +'<label for="mainTable"><h2>'    + personName    + '档案调用情况表</h2></label>'    +'<table id="content-table" border="1" >'    + '<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 id="data-month-'+i+'">'      + monthData[i]      + '</td><td id="data-value-'+i+'">'      + data[i]      + '</td></tr>'  }  html += '</table></div>';  document.getElementById('mainTable').innerHTML = html; }

看完上述内容，你们掌握Echarts怎么在ExtJs中使用的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！