ExtJs integrierte Echarts

Dieses Mal präsentiere ich Ihnen die Vorsichtsmaßnahmen bei der Verwendung von ExtJs zur Integration von Echarts.

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.

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 nur ein Echarts generiert werden kann Definieren Sie gleichzeitig verwandte Stile und laden Sie sie aus dem Hintergrund herunter. Die Abfragedaten werden für Echarts bereitgestellt.

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

Zuweisung von Tabellendaten

Der Tabellenteil ist Eine einfache HTML-Zuweisung. Es gibt nicht viel zu besprechen. Achten Sie darauf, den HTML-Code nach dem Spleißen zu aktualisieren. Der Code lautet wie folgt:

tableData : function(personName, monthData, data) {
 // 表格部分
 var html = '<p id="mainTable" style="position:relative;text-align:center;padding:10px;">'
   +'<label for="mainTable"><h1>'
   + personName
   + '档案调用情况表</h1></label>'
   +'<table id="content-table" border="1" style="width: 100%;text-align: center;">'
   + '<tr style="height: 30px;text-align:center;"><th>月份</th><th>调用次数</th></tr>';
 // 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;">'
     +'<td id="data-month-&#39;+i+&#39;">'
     + monthData[i]
     + '</td><td id="data-value-&#39;+i+&#39;">'
     + data[i]
     + '</td></tr>'
 }
 html += '</table></p>';
 document.getElementById('mainTable').innerHTML = html;
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie läuft der Javascript-Modul-Loader?

So implementieren Sie eine Back-Force-Aktualisierung im WeChat-Web Seite

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