Bagaimana untuk memuatkan data carta statistik secara dinamik melalui antara muka php dan ECharts-tutorial php-php.cn

Bagaimana untuk memuatkan data carta statistik secara dinamik melalui antara muka php dan ECharts

WBOY

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

asal

1079 orang telah melayarinya

Bagaimana untuk memuatkan data carta statistik secara dinamik melalui antara muka php dan ECharts

Cara memuatkan data carta statistik secara dinamik melalui antara muka PHP dan ECharts

[Pengenalan]
Memandangkan visualisasi data semakin dihargai oleh perusahaan dan pembangun, aplikasi carta statistik menjadi semakin meluas. Sebagai perpustakaan carta JavaScript sumber terbuka, ECharts menyediakan pelbagai jenis carta dan kaedah interaksi Digabungkan dengan antara muka PHP, ia boleh memuatkan data carta statistik secara dinamik. Artikel ini akan memperkenalkan langkah khusus tentang cara menggunakan antara muka PHP dan ECharts untuk memuatkan data carta statistik secara dinamik dan menyediakan kod sampel untuk rujukan.

【Langkah】

Sediakan data

Pertama, anda perlu menyediakan data yang perlu dipaparkan. Data boleh diperolehi melalui MySQL, API, dsb., dan data boleh diformatkan ke dalam format JSON yang diperlukan. Mengambil histogram sebagai contoh, format data adalah seperti berikut:

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

Salin selepas log masuk

Buat antara muka PHP

Seterusnya, anda perlu mencipta antara muka PHP untuk mendapatkan data. Kod sampel adalah seperti berikut:

<?php

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

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

echo json_encode($data);

Salin selepas log masuk

Melalui kod di atas, kami boleh mengembalikan data format JSON yang diperlukan ke bahagian hadapan.

Cipta fail HTML

Seterusnya, buat fail HTML dan import ECharts dan perpustakaan jQuery. Kod sampel adalah seperti berikut:

<!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>

Salin selepas log masuk

Melalui kod di atas, kami menggunakan kaedah ajax untuk memanggil antara muka PHP untuk mendapatkan data, dan menggunakan ECharts untuk melukis histogram.

【Ringkasan】
Melalui langkah di atas, kita boleh menggunakan antara muka PHP dan ECharts untuk memuatkan data carta statistik secara dinamik. Pertama, data yang akan dipaparkan perlu disediakan dan diformatkan ke dalam format JSON. Kemudian, cipta antara muka PHP untuk mendapatkan data dan kembalikan data ke bahagian hadapan dalam format JSON. Akhir sekali, bahagian hadapan memanggil antara muka PHP melalui ajax untuk mendapatkan data, dan menggunakan ECharts untuk melukis carta yang sepadan.

【Kod rujukan】
Kod antara muka PHP:

<?php

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

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

echo json_encode($data);

Salin selepas log masuk

Kod fail HTML:

<!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>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk memuatkan data carta statistik secara dinamik melalui antara muka php dan ECharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!