How to dynamically load statistical chart data through the php interface and ECharts-PHP Tutorial-php.cn

How to dynamically load statistical chart data through the php interface and ECharts

WBOY

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

Original

1071 people have browsed it

How to dynamically load statistical chart data through the php interface and ECharts

How to dynamically load statistical chart data through the PHP interface and ECharts

[Introduction]
As data visualization becomes more and more popular among enterprises and developers Attention, the application of statistical charts is becoming more and more widespread. As an open source JavaScript chart library, ECharts provides a wealth of chart types and interaction methods. Combined with the PHP interface, it can dynamically load statistical chart data. This article will introduce the specific steps of how to use the PHP interface and ECharts to dynamically load statistical chart data, and provide sample code for reference.

[Steps]

Prepare data

First, you need to prepare the data that needs to be displayed. Data can be obtained through MySQL, API, etc., and the data can be formatted into the required JSON format. Taking the histogram as an example, the data format is as follows:

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

Copy after login

Create a PHP interface

Next, you need to create a PHP interface for obtaining data. The sample code is as follows:

<?php

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

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

echo json_encode($data);

Copy after login

Through the above code, we can return the required JSON format data to the front end.

Create HTML file

Next, create an HTML file and introduce ECharts and jQuery libraries. The sample code is as follows:

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

Copy after login

Through the above code, we use the ajax method to call the PHP interface to obtain data, and use ECharts to draw a histogram.

[Summary]
Through the above steps, we can use the PHP interface and ECharts to dynamically load statistical chart data. First, the data to be displayed needs to be prepared and formatted into JSON format. Then, create a PHP interface to obtain data and return the data to the front end in JSON format. Finally, the front end calls the PHP interface through ajax to obtain the data, and uses ECharts to draw the corresponding chart.

【Reference code】
PHP interface code:

<?php

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

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

echo json_encode($data);

Copy after login

HTML file code:

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

Copy after login

The above is the detailed content of How to dynamically load statistical chart data through the php interface and ECharts. For more information, please follow other related articles on the PHP Chinese website!