ExtJs integration Echarts method sharing

This article mainly introduces you to the example code of ExtJs integrating Echarts. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Since Echarts does not provide table functions, if you want to implement the above picture and the following table, you need to add a table tag yourself.

ExtJs integrates Echarts

Download the js file from the Echarts official website and create a new page through the import reference, typesetting through two vertically placed p, the top is reserved for Echarts, The bottom is reserved for table tags

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

Echarts initialization and data loading

Official statement that only one echarts can be generated at a time, definition Relevant styles, and query data from the background to provide 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 : &#39;暂无数据&#39;,
   effect : &#39;bubble&#39;,
   effectOption : {
    effect : {
     n : 0
    }
   }
  },
  title : {
   text : personName + "的档案调用情况",
   x : &#39;west&#39;
  },
  tooltip : {
   trigger : &#39;axis&#39;
  },
  legend : {
   data : [&#39;调用次数&#39;]
  },
  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 = &#39;<table style="width:100%;text-align:center" border="1"><tbody><tr>&#39;
        + &#39;<td>时间</td>&#39;
        + &#39;<td>&#39;
        + series[0].name + &#39;</td>&#39;
        // + &#39;<td>&#39;
        // + series[1].name
        // + &#39;</td>&#39;
        + &#39;</tr>&#39;;
      for (var i = 0, l = axisData.length; i < l; i++) {
       table += &#39;<tr>&#39; + &#39;<td>&#39; + axisData[i]
         + &#39;</td>&#39; + &#39;<td>&#39;
         + series[0].data[i] + &#39;</td>&#39;
         // + &#39;<td>&#39; + series[1].data[i]
         // + &#39;</td>&#39;
         + &#39;</tr>&#39;;
      }
      table += &#39;</tbody></table>&#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)
 //表格的加载
}

Assignment of table data

The table part is simple html Assignment, there is not much to talk about, just pay attention to refresh the html after splicing. The code is as follows:

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

Related recommendations:

How to use H5’s WebGL to make json and echarts charts in the same interface

Detailed explanation of how to use the jQuery plug-in echarts to remove vertical grid lines

Detailed explanation of using Echarts to generate data statistical reports in PHP

The above is the detailed content of ExtJs integration Echarts method sharing. For more information, please follow other related articles on the PHP Chinese website!