So integrieren Sie Echarts mithilfe von ExtJs (ausführliches Tutorial)

In diesem Artikel wird hauptsächlich der Beispielcode für die Integration von Echarts mit ExtJs vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

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

Echarts-Initialisierung und Datenladen

Die offizielle Erklärung besagt, dass jeweils nur ein Echarts generiert werden kann Zeit, verwandte Stile definieren und Daten aus dem Hintergrund abfragen. Die Zuweisung der bereitgestellten Tabellendaten an echarts

Der Tabellenteil ist eine einfache HTML-Zuweisung Es gibt nicht viel zu sagen. Aktualisieren Sie einfach den HTML-Code nach dem Spleißen. Der Code lautet wie folgt:

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 : '暂无数据',
   effect : 'bubble',
   effectOption : {
    effect : {
     n : 0
    }
   }
  },
  title : {
   text : personName + "的档案调用情况",
   x : 'west'
  },
  tooltip : {
   trigger : 'axis'
  },
  legend : {
   data : ['调用次数']
  },
  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 = '<table style="width:100%;text-align:center" border="1"><tbody><tr>'
        + '<td>时间</td>'
        + '<td>'
        + series[0].name + '</td>'
        // + '<td>'
        // + series[1].name
        // + '</td>'
        + '</tr>';
      for (var i = 0, l = axisData.length; i < l; i++) {
       table += '<tr>' + '<td>' + axisData[i]
         + '</td>' + '<td>'
         + series[0].data[i] + '</td>'
         // + '<td>' + series[1].data[i]
         // + '</td>'
         + '</tr>';
      }
      table += '</tbody></table>';
      return table;
     }
    },
    magicType : {
     show : true,
     type : ['line', 'bar']
    },
    restore : {
     show : true
    },
    saveAsImage : {
     show : true
    }
   }
  },
  calculable : true,
  xAxis : [{
     type : 'category',
     data : monthData
    }],
  yAxis : [{
     type : 'value',
     splitArea : {
      show : true
     }
    }],
  series : [{
   name : '调用次数',
   type : 'bar',
   barWidth : 35,
   data : data,
   itemStyle : {//修改柱状图的颜色并在顶部显示数值
    normal : {
     color : '#3575a8', 
     label : {
      show : true,
      position : 'top',
      formatter : '{c}'//'{b}\n{c}'
     }
    }
   }
  }]
 };
 myChart.setOption(options, true);
 myChart.on('click', function eConsole(param) {
   });
 this.tableData(personName, monthData, data)
 //表格的加载
}

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Wie verwende ich Filter in der Vue2.0-Serie?

So kehren Sie über die Tween-Methode im Vue-Projekt nach oben zurück

So verwenden Sie Vue, um festzustellen, ob der Eingabeinhalt vollständig ist Leerzeichen?

Das obige ist der detaillierte Inhalt vonSo integrieren Sie Echarts mithilfe von ExtJs (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!