So laden Sie statistische Diagrammdaten dynamisch über die PHP-Schnittstelle und ECharts-PHP-Tutorial-php.cn

So laden Sie statistische Diagrammdaten dynamisch über die PHP-Schnittstelle und ECharts

WBOY

Freigeben： 2023-12-17 14:28:01

Original

1028 Leute haben es durchsucht

So laden Sie statistische Diagrammdaten dynamisch über die PHP-Schnittstelle und ECharts

[Einführung]
Da die Datenvisualisierung von Unternehmen und Entwicklern immer mehr geschätzt wird, wird die Anwendung statistischer Diagramme immer weiter verbreitet. Als Open-Source-JavaScript-Diagrammbibliothek bietet ECharts eine Fülle von Diagrammtypen und Interaktionsmethoden. In Kombination mit der PHP-Schnittstelle können statistische Diagrammdaten dynamisch geladen werden. In diesem Artikel werden die spezifischen Schritte zur Verwendung der PHP-Schnittstelle und ECharts zum dynamischen Laden statistischer Diagrammdaten vorgestellt und Beispielcode als Referenz bereitgestellt.

【Schritte】

Daten vorbereiten

Zuerst müssen Sie die Daten vorbereiten, die angezeigt werden müssen. Daten können über MySQL, API usw. abgerufen und in das erforderliche JSON-Format formatiert werden. Am Beispiel eines Histogramms sieht das Datenformat wie folgt aus:

[
  {
    "name": "数据1",
    "value": 100
  },
  {
    "name": "数据2",
    "value": 200
  },
  {
    "name": "数据3",
    "value": 300
  }
]

Nach dem Login kopieren

Erstellen Sie eine PHP-Schnittstelle

Als nächstes müssen Sie eine PHP-Schnittstelle zum Abrufen von Daten erstellen. Der Beispielcode lautet wie folgt:

<?php

header('Content-Type: application/json');

// 从数据库或API获取数据
$data = [
  ["name" => "数据1", "value" => 100],
  ["name" => "数据2", "value" => 200],
  ["name" => "数据3", "value" => 300]
];

echo json_encode($data);

Nach dem Login kopieren

Mit dem obigen Code können wir die erforderlichen Daten im JSON-Format an das Frontend zurückgeben.

HTML-Datei erstellen

Als nächstes erstellen Sie eine HTML-Datei und importieren ECharts und jQuery-Bibliotheken. Der Beispielcode lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>统计图</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 600px; height: 400px;"></div>

  <script>
    $(function() {
      // 使用jQuery的ajax方法调用PHP接口获取数据
      $.ajax({
        url: 'api.php',
        type: 'GET',
        dataType: 'json',
        success: function(data) {
          // 获取数据成功后，调用ECharts绘制图表
          var chart = echarts.init(document.getElementById('chart'));
          var option = {
            title: {
              text: '统计图'
            },
            tooltip: {},
            xAxis: {
              type: 'category',
              data: data.map(function(item) {
                return item.name;
              })
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: data.map(function(item) {
                return item.value;
              }),
              type: 'bar'
            }]
          };
          chart.setOption(option);
        }
      });
    });
  </script>
</body>
</html>

Nach dem Login kopieren

Durch den obigen Code verwenden wir die Ajax-Methode, um die PHP-Schnittstelle aufzurufen, um Daten abzurufen, und verwenden ECharts, um das Histogramm zu zeichnen.

【Zusammenfassung】
Durch die obigen Schritte können wir die PHP-Schnittstelle und ECharts verwenden, um statistische Diagrammdaten dynamisch zu laden. Zunächst müssen die anzuzeigenden Daten aufbereitet und im JSON-Format formatiert werden. Erstellen Sie dann eine PHP-Schnittstelle, um Daten abzurufen und die Daten im JSON-Format an das Frontend zurückzugeben. Schließlich ruft das Frontend die PHP-Schnittstelle über Ajax auf, um die Daten abzurufen, und verwendet ECharts, um das entsprechende Diagramm zu zeichnen.

【Referenzcode】
PHP-Schnittstellencode:

<?php

header('Content-Type: application/json');

// 从数据库或API获取数据
$data = [
  ["name" => "数据1", "value" => 100],
  ["name" => "数据2", "value" => 200],
  ["name" => "数据3", "value" => 300]
];

echo json_encode($data);

Nach dem Login kopieren

HTML-Dateicode:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>统计图</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 600px; height: 400px;"></div>

  <script>
    $(function() {
      // 使用jQuery的ajax方法调用PHP接口获取数据
      $.ajax({
        url: 'api.php',
        type: 'GET',
        dataType: 'json',
        success: function(data) {
          // 获取数据成功后，调用ECharts绘制图表
          var chart = echarts.init(document.getElementById('chart'));
          var option = {
            title: {
              text: '统计图'
            },
            tooltip: {},
            xAxis: {
              type: 'category',
              data: data.map(function(item) {
                return item.name;
              })
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: data.map(function(item) {
                return item.value;
              }),
              type: 'bar'
            }]
          };
          chart.setOption(option);
        }
      });
    });
  </script>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo laden Sie statistische Diagrammdaten dynamisch über die PHP-Schnittstelle und ECharts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!