How to integrate Echarts using ExtJs (detailed tutorial)

This article mainly introduces the sample code for integrating Echarts with ExtJs. Now I share it with you and give it as a reference.

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

The official statement states that only one echarts can be generated at a time, define related styles, and query data from the background Provided to 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 a simple html assignment. There is not much to say. Just 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;
}

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use filters in the Vue2.0 series?

How to return to the top through the tween method in the vue project

How to use vue to determine that the input content is all spaces?

The above is the detailed content of How to integrate Echarts using ExtJs (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!