如何使用ExtJs整合Echarts（详细教程）-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

如何使用ExtJs整合Echarts（详细教程）

Jun 04, 2018 am 10:46 AM

echarts extjs javascript

本篇文章主要介绍了ExtJs整合Echarts的示例代码，现在分享给大家，也给大家做个参考。

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

ExtJs整合Echarts

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

initPanel : function() {
 if (this.panel) {
  return
 }
 
 var panel = new Ext.Panel({
  id : &#39;echart&#39;,
  html :   &#39;&lt;p id=&quot;mainEchart&quot; style=&quot;height:50%;border:1px solid #ccc;padding:10px;&quot;&gt;&lt;/p&gt;&#39;
        + &#39;&lt;p id=&quot;mainTable&quot; style=&quot;position:relative;text-align:center;padding:10px;&quot;&gt;&#39;
        +&#39;&lt;label for=&quot;mainTable&quot;&gt;&lt;h1&gt;档案调用次数表&lt;/h1&gt;&lt;/label&gt;&#39;
        +&#39;&lt;table id=&quot;content-table&quot; border=&quot;1&quot; style=&quot;width:100%;text-align:center;&quot;&gt;&#39;
        + &#39;&lt;tr&gt;&lt;th&gt;月份&lt;/th&gt;&lt;th&gt;调用次数&lt;/th&gt;&lt;/tr&gt;&#39;,
  buttonAlign : &#39;center&#39;,
  autoScroll : true,//允许滚动
  bodyStyle : &#39;overflow-x:hidden; overflow-y:scroll&#39;
  //开启竖直滚动条，关闭水平滚动条
 });
 
 this.panel = panel;
 return this.panel; 
}

Salin selepas log masuk

Echarts初始化和数据加载

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

initData : function(id, personName, year) {
 this.id = id;
 var p = document.getElementById(&quot;mainEchart&quot;);
 var myChart = echarts.init(p);
 // myChart.showLoading({
 // text: &quot;图表数据正在努力加载...&quot;
 // });
 this.myChart = myChart;
 // 初始化数据
 var data = [];
 var yearStr = &quot;&quot;;
 var flag = false;
 var monthData = [];
 
 var res = QueryData();//调用数据查询，涉及项目名，略
 
 for (var i = 0; i &lt; 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 : &#39;暂无数据&#39;,
   effect : &#39;bubble&#39;,
   effectOption : {
    effect : {
     n : 0
    }
   }
  },
  title : {
   text : personName + &quot;的档案调用情况&quot;,
   x : &#39;west&#39;
  },
  tooltip : {
   trigger : &#39;axis&#39;
  },
  legend : {
   data : [&#39;调用次数&#39;]
  },
  toolbox : {
   show : true,
   feature : {
    mark : {
     show : true
    },
    dataView : {
    //重写dataView
    //在切换视图的时候能够以&lt;table&gt;的形式显示
     show : true,
     readOnly : true,
     optionToContent : function(opt) {
      var axisData = opt.xAxis[0].data;
      var series = opt.series;
      var table = &#39;&lt;table style=&quot;width:100%;text-align:center&quot; border=&quot;1&quot;&gt;&lt;tbody&gt;&lt;tr&gt;&#39;
        + &#39;&lt;td&gt;时间&lt;/td&gt;&#39;
        + &#39;&lt;td&gt;&#39;
        + series[0].name + &#39;&lt;/td&gt;&#39;
        // + &#39;&lt;td&gt;&#39;
        // + series[1].name
        // + &#39;&lt;/td&gt;&#39;
        + &#39;&lt;/tr&gt;&#39;;
      for (var i = 0, l = axisData.length; i &lt; l; i++) {
       table += &#39;&lt;tr&gt;&#39; + &#39;&lt;td&gt;&#39; + axisData[i]
         + &#39;&lt;/td&gt;&#39; + &#39;&lt;td&gt;&#39;
         + series[0].data[i] + &#39;&lt;/td&gt;&#39;
         // + &#39;&lt;td&gt;&#39; + series[1].data[i]
         // + &#39;&lt;/td&gt;&#39;
         + &#39;&lt;/tr&gt;&#39;;
      }
      table += &#39;&lt;/tbody&gt;&lt;/table&gt;&#39;;
      return table;
     }
    },
    magicType : {
     show : true,
     type : [&#39;line&#39;, &#39;bar&#39;]
    },
    restore : {
     show : true
    },
    saveAsImage : {
     show : true
    }
   }
  },
  calculable : true,
  xAxis : [{
     type : &#39;category&#39;,
     data : monthData
    }],
  yAxis : [{
     type : &#39;value&#39;,
     splitArea : {
      show : true
     }
    }],
  series : [{
   name : &#39;调用次数&#39;,
   type : &#39;bar&#39;,
   barWidth : 35,
   data : data,
   itemStyle : {//修改柱状图的颜色并在顶部显示数值
    normal : {
     color : &#39;#3575a8&#39;, 
     label : {
      show : true,
      position : &#39;top&#39;,
      formatter : &#39;{c}&#39;//&#39;{b}\n{c}&#39;
     }
    }
   }
  }]
 };
 myChart.setOption(options, true);
 myChart.on(&#39;click&#39;, function eConsole(param) {
   });
 this.tableData(personName, monthData, data)
 //表格的加载
}

Salin selepas log masuk

表格数据的赋值

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

tableData : function(personName, monthData, data) {
 // 表格部分
 var html = &#39;&lt;p id=&quot;mainTable&quot; style=&quot;position:relative;text-align:center;padding:10px;&quot;&gt;&#39;
   +&#39;&lt;label for=&quot;mainTable&quot;&gt;&lt;h1&gt;&#39;
   + personName
   + &#39;档案调用情况表&lt;/h1&gt;&lt;/label&gt;&#39;
   +&#39;&lt;table id=&quot;content-table&quot; border=&quot;1&quot; style=&quot;width: 100%;text-align: center;&quot;&gt;&#39;
   + &#39;&lt;tr style=&quot;height: 30px;text-align:center;&quot;&gt;&lt;th&gt;月份&lt;/th&gt;&lt;th&gt;调用次数&lt;/th&gt;&lt;/tr&gt;&#39;;
 // if(monthData.length != data.length)
 // throw new Error(&quot;数据条数不对，请检查！&quot;);
 for (var i = 0; i &lt; data.length; i++) {
  html += &#39;&lt;tr style=&quot;height: 30px;text-align: center;&quot;&gt;&#39;
     +&#39;&lt;td id=&quot;data-month-&#39;+i+&#39;&quot;&gt;&#39;
     + monthData[i]
     + &#39;&lt;/td&gt;&lt;td id=&quot;data-value-&#39;+i+&#39;&quot;&gt;&#39;
     + data[i]
     + &#39;&lt;/td&gt;&lt;/tr&gt;&#39;
 }
 html += &#39;&lt;/table&gt;&lt;/p&gt;&#39;;
 document.getElementById(&#39;mainTable&#39;).innerHTML = html;
}

Salin selepas log masuk

上面是我整理给大家的，希望今后会对大家有帮助。

在Vue2.0系列中如何使用过滤器？

在vue项目中通过tween方法如何实现返回顶部

使用vue如何判断input输入内容全是空格？

Atas ialah kandungan terperinci 如何使用ExtJs整合Echarts（详细教程）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn