So kombinieren Sie ECharts und die PHP-Schnittstelle, um eine statistische Diagrammanzeige mehrdimensionaler Daten zu realisieren-PHP-Tutorial-php.cn

So kombinieren Sie ECharts und die PHP-Schnittstelle, um eine statistische Diagrammanzeige mehrdimensionaler Daten zu realisieren

WBOY

Freigeben： 2023-12-18 11:06:02

Original

926 Leute haben es durchsucht

So kombinieren Sie ECharts und die PHP-Schnittstelle, um eine statistische Diagrammanzeige mehrdimensionaler Daten zu realisieren

So kombinieren Sie ECharts und die PHP-Schnittstelle, um eine statistische Diagrammdarstellung mehrdimensionaler Daten zu realisieren

Zusammenfassung: ECharts ist eine Open-Source-Bibliothek für Datenvisualisierungsdiagramme von Baidu, die mehrere Diagrammtypen und interaktive Vorgänge unterstützen kann. Durch die Kombination von ECharts und PHP-Schnittstellen können Sie auf einfache Weise eine statistische Diagrammdarstellung mehrdimensionaler Daten realisieren. In diesem Artikel wird erläutert, wie Sie mit ECharts verschiedene Arten von Diagrammen zeichnen und die PHP-Schnittstelle verwenden, um Daten an das Frontend zu übergeben.

Schlüsselwörter: ECarts, PHP-Schnittstelle, mehrdimensionale Daten, statistische Diagrammanzeige

1 Hintergrundeinführung

Bei der Datenvisualisierung ist die statistische Diagrammanzeige eine gängige und wichtige Methode. ECharts bietet eine Fülle von Diagrammtypen und interaktiven Operationen, um eine Vielzahl von Datenanzeigeanforderungen zu erfüllen. Über die PHP-Schnittstelle können wir Back-End-Daten einfach an das Front-End übertragen, um eine dynamische Diagrammanzeige zu erreichen.

2. Grundlegende Verwendung von ECharts

Führen Sie die ECharts-Bibliotheksdatei in die HTML-Seite ein und erstellen Sie ein Container-Div zum Hosten des Diagramms.

<!DOCTYPE html>
<html>
<head>
  <script src="echarts.min.js"></script>
</head>
<body>
  <div id="chart"></div>
</body>
</html>

Nach dem Login kopieren

Erstellen Sie eine Diagramminstanz

Erstellen Sie in JavaScript eine Diagramminstanz und geben Sie den Container und den Diagrammtyp an.

var chart = echarts.init(document.getElementById('chart'));

Nach dem Login kopieren

Diagrammparameter konfigurieren

Definieren Sie den Stil und die Daten des Diagramms, indem Sie die Parameter des Diagramms konfigurieren.

var option = {
  title: {
    text: '图表标题'
  },
  xAxis: {
    data: ['类别1', '类别2', '类别3']
  },
  yAxis: {},
  series: [
    {
      name: '系列1',
      type: 'bar',
      data: [10, 20, 30]
    },
    {
      name: '系列2',
      type: 'bar',
      data: [15, 25, 35]
    }
  ]
};

Nach dem Login kopieren

Diagramm rendern

Wenden Sie Konfigurationsparameter auf das Diagramm an, indem Sie die Methode chart.setOption aufrufen.

chart.setOption(option);

Nach dem Login kopieren

3. In Kombination mit der PHP-Schnittstelle zur Datenübertragung

Back-End-Datenverarbeitung

Beziehen Sie in der PHP-Schnittstelle Daten aus der Datenbank oder anderen Datenquellen entsprechend den Geschäftsanforderungen und verarbeiten Sie die Daten.

$data = array(
  'categories' => ['类别1', '类别2', '类别3'],
  'series' => array(
    array(
      'name' => '系列1',
      'data' => [10, 20, 30]
    ),
    array(
      'name' => '系列2',
      'data' => [15, 25, 35]
    )
  )
);

echo json_encode($data);  // 将数据转为 json 格式输出

Nach dem Login kopieren

Front-End-Datenanforderung

Verwenden Sie das XMLHttpRequest-Objekt in JavaScript, um eine Datenanforderung an die PHP-Schnittstelle zu senden und die zurückgegebenen Daten zu analysieren.

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var data = JSON.parse(xhr.responseText);
    var option = {
      title: {
        text: '图表标题'
      },
      xAxis: {
        data: data.categories
      },
      yAxis: {},
      series: data.series
    };

    chart.setOption(option);
  }
};

xhr.open('GET', 'data.php', true);
xhr.send();

Nach dem Login kopieren

Vier. Implementierung verschiedener Arten von Diagrammen

Balkendiagramm

var option = {
  title: {
    text: '条形图'
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['类别1', '类别2', '类别3']
  },
  series: [
    {
      name: '系列1',
      type: 'bar',
      data: [10, 20, 30]
    }
  ]
};

Nach dem Login kopieren

var option = {
  title: {
    text: '饼图'
  },
  series: [
    {
      name: '系列1',
      type: 'pie',
      radius: '55%',
      data: [
        {value: 10, name: '类别1'},
        {value: 20, name: '类别2'},
        {value: 30, name: '类别3'}
      ]
    }
  ]
};

Nach dem Login kopieren

var option = {
  title: {
    text: '折线图'
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['类别1', '类别2', '类别3']
  },
  yAxis: {},
  series: [
    {
      name: '系列1',
      type: 'line',
      data: [10, 20, 30]
    }
  ]
};

Nach dem Login kopieren

V. Zusammenfassung

Durch die Kombination von ECharts und PHP Schnittstellen können wir problemlos realisieren Statistische Diagrammdarstellung mehrdimensionaler Daten. Durch die umfangreichen Diagrammtypen und interaktiven Operationen von ECharts sowie die Datenverarbeitung und -übertragung der PHP-Schnittstelle können wir die Datenanzeige unterschiedlicher Geschäftsanforderungen erfüllen. Ich hoffe, dass dieser Artikel bei der Implementierung der statistischen Diagrammanzeige mit ECharts und PHP hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonSo kombinieren Sie ECharts und die PHP-Schnittstelle, um eine statistische Diagrammanzeige mehrdimensionaler Daten zu realisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!