ExtJs-Integration Echarts-Methodenfreigabe

Dieser Artikel stellt Ihnen hauptsächlich den Beispielcode von ExtJs vor, der Echarts integriert. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber, um einen Blick darauf zu werfen. Ich hoffe, es kann allen helfen.

Da Echarts keine Tabellenfunktionen bereitstellt, müssen Sie selbst ein Tabellen-Tag hinzufügen, wenn Sie das obige Bild und die folgende Tabelle implementieren möchten.

ExtJs integriert Echarts

Laden Sie die js-Datei von der offiziellen Echarts-Website herunter und erstellen Sie eine neue Seite, indem Sie die Referenz importieren, indem Sie zwei p's vertikal platzieren Die Oberseite ist für Echarts reserviert. Die Unterseite ist für Tabellen-Tags reserviert

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-Initialisierung und Datenladen

Offizielle Erklärung dass jeweils nur ein Echarts generiert werden kann, relevante Stile definieren und Daten aus dem Hintergrund zu Echarts abfragen

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)
 //表格的加载
}

Zuweisung von Tabellendaten

Tabellenteil Es ist nur eine einfache HTML-Zuweisung, es gibt nicht viel zu sagen, achten Sie nur darauf, den HTML-Code nach dem Spleißen zu aktualisieren. Der Code lautet wie folgt:

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;
}

Verwandte Empfehlungen:

So verwenden Sie H5s WebGL, um JSON- und Echarts-Diagramme gleichzeitig zu erstellen Schnittstelle

Ausführliche Erklärung zur Verwendung des jQuery-Plug-ins echarts zum Entfernen vertikaler Gitterlinien

PHP Detaillierte Erklärung zur Verwendung von Echarts zum Generieren Datenstatistikberichte

Das obige ist der detaillierte Inhalt vonExtJs-Integration Echarts-Methodenfreigabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!