当前位置:Gxlcms > JavaScript > ExtJs整合Echarts的示例代码

ExtJs整合Echarts的示例代码

时间:2021-07-01 10:21:17 帮助过:52人阅读

由于Echarts不提供表格功能,想要实现上图下表,需要自己增加一个table标签。

ExtJs整合Echarts

从Echarts官网下载js文件通过import引用 新建一个页面,通过竖直放置的两个div排版,上方预留给Echarts,下方预留给table标签

  1. initPanel : function() {
  2. if (this.panel) {
  3. return
  4. }
  5. var panel = new Ext.Panel({
  6. id : 'echart',
  7. html : '<div id="mainEchart" style="height:50%;border:1px solid #ccc;padding:10px;"></div>'
  8. + '<div id="mainTable" style="position:relative;text-align:center;padding:10px;">'
  9. +'<label for="mainTable"><h1>档案调用次数表</h1></label>'
  10. +'<table id="content-table" border="1" style="width:100%;text-align:center;">'
  11. + '<tr><th>月份</th><th>调用次数</th></tr>',
  12. buttonAlign : 'center',
  13. autoScroll : true,//允许滚动
  14. bodyStyle : 'overflow-x:hidden; overflow-y:scroll'
  15. //开启竖直滚动条,关闭水平滚动条
  16. });
  17. this.panel = panel;
  18. return this.panel;
  19. }

Echarts初始化和数据加载

官方声明一次性只能生成一个echarts,定义相关的样式,并且从后台查询数据提供给echarts

  1. initData : function(id, personName, year) {
  2. this.id = id;
  3. var div = document.getElementById("mainEchart");
  4. var myChart = echarts.init(div);
  5. // myChart.showLoading({
  6. // text: "图表数据正在努力加载..."
  7. // });
  8. this.myChart = myChart;
  9. // 初始化数据
  10. var data = [];
  11. var yearStr = "";
  12. var flag = false;
  13. var monthData = [];
  14. var res = QueryData();//调用数据查询,涉及项目名,略
  15. for (var i = 0; i < res.json.body.length; i++) {
  16. var map = res.json.body[i];
  17. monthData.push(map.MM);//月份
  18. data.push(map.DYCS);//调用次数
  19. }
  20. var options = {
  21. arg : {
  22. id : this.id
  23. },
  24. noDataLoadingOption : {
  25. text : '暂无数据',
  26. effect : 'bubble',
  27. effectOption : {
  28. effect : {
  29. n : 0
  30. }
  31. }
  32. },
  33. title : {
  34. text : personName + "的档案调用情况",
  35. x : 'west'
  36. },
  37. tooltip : {
  38. trigger : 'axis'
  39. },
  40. legend : {
  41. data : ['调用次数']
  42. },
  43. toolbox : {
  44. show : true,
  45. feature : {
  46. mark : {
  47. show : true
  48. },
  49. dataView : {
  50. //重写dataView
  51. //在切换视图的时候能够以<table>的形式显示
  52. show : true,
  53. readOnly : true,
  54. optionToContent : function(opt) {
  55. var axisData = opt.xAxis[0].data;
  56. var series = opt.series;
  57. var table = '<table style="width:100%;text-align:center" border="1"><tbody><tr>'
  58. + '<td>时间</td>'
  59. + '<td>'
  60. + series[0].name + '</td>'
  61. // + '<td>'
  62. // + series[1].name
  63. // + '</td>'
  64. + '</tr>';
  65. for (var i = 0, l = axisData.length; i < l; i++) {
  66. table += '<tr>' + '<td>' + axisData[i]
  67. + '</td>' + '<td>'
  68. + series[0].data[i] + '</td>'
  69. // + '<td>' + series[1].data[i]
  70. // + '</td>'
  71. + '</tr>';
  72. }
  73. table += '</tbody></table>';
  74. return table;
  75. }
  76. },
  77. magicType : {
  78. show : true,
  79. type : ['line', 'bar']
  80. },
  81. restore : {
  82. show : true
  83. },
  84. saveAsImage : {
  85. show : true
  86. }
  87. }
  88. },
  89. calculable : true,
  90. xAxis : [{
  91. type : 'category',
  92. data : monthData
  93. }],
  94. yAxis : [{
  95. type : 'value',
  96. splitArea : {
  97. show : true
  98. }
  99. }],
  100. series : [{
  101. name : '调用次数',
  102. type : 'bar',
  103. barWidth : 35,
  104. data : data,
  105. itemStyle : {//修改柱状图的颜色并在顶部显示数值
  106. normal : {
  107. color : '#3575a8',
  108. label : {
  109. show : true,
  110. position : 'top',
  111. formatter : '{c}'//'{b}\n{c}'
  112. }
  113. }
  114. }
  115. }]
  116. };
  117. myChart.setOption(options, true);
  118. myChart.on('click', function eConsole(param) {
  119. });
  120. this.tableData(personName, monthData, data)
  121. //表格的加载
  122. }

表格数据的赋值

表格部分就是简单的html赋值,没什么好多讲的,注意拼接完后刷新一下html即可。 代码如下:

  1. tableData : function(personName, monthData, data) {
  2. // 表格部分
  3. var html = '<div id="mainTable" style="position:relative;text-align:center;padding:10px;">'
  4. +'<label for="mainTable"><h1>'
  5. + personName
  6. + '档案调用情况表</h1></label>'
  7. +'<table id="content-table" border="1" style="width: 100%;text-align: center;">'
  8. + '<tr style="height: 30px;text-align:center;"><th>月份</th><th>调用次数</th></tr>';
  9. // if(monthData.length != data.length)
  10. // throw new Error("数据条数不对,请检查!");
  11. for (var i = 0; i < data.length; i++) {
  12. html += '<tr style="height: 30px;text-align: center;">'
  13. +'<td id="data-month-'+i+'">'
  14. + monthData[i]
  15. + '</td><td id="data-value-'+i+'">'
  16. + data[i]
  17. + '</td></tr>'
  18. }
  19. html += '</table></div>';
  20. document.getElementById('mainTable').innerHTML = html;
  21. }

以上就可完成数据的联动,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

人气教程排行