Home > Backend Development > PHP Tutorial > How to combine ECharts and php interface to realize statistical chart display of multi-dimensional data

How to combine ECharts and php interface to realize statistical chart display of multi-dimensional data

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Release: 2023-12-18 11:06:02
Original
987 people have browsed it

How to combine ECharts and php interface to realize statistical chart display of multi-dimensional data

How to combine ECharts and php interface to realize statistical chart display of multi-dimensional data

Abstract: ECharts is a data visualization chart library open sourced by Baidu, which can support multiple chart types and interactions. Combining ECharts and php interfaces, you can easily realize statistical chart display of multi-dimensional data. This article will introduce how to use ECharts to draw different types of charts and use the php interface to pass data to the front end.

Keywords: ECharts, php interface, multi-dimensional data, statistical chart display

1. Background introduction

In data visualization, statistical chart display is a common and Important ways. ECharts provides a wealth of chart types and interactive operations to meet a variety of data display needs. Through the php interface, we can easily transfer back-end data to the front-end to achieve dynamic chart display.

2. Basic use of ECharts

  1. Introduce the ECharts library

Introduce the ECharts library file into the html page and create a container div for Host chart.

<!DOCTYPE html>
<html>
<head>
  <script src="echarts.min.js"></script>
</head>
<body>
  <div id="chart"></div>
</body>
</html>
Copy after login
  1. Create a chart instance

In JavaScript, create a chart instance and specify the container and chart type.

var chart = echarts.init(document.getElementById('chart'));
Copy after login
  1. Configure chart parameters

Define the style and data of the chart by configuring the parameters of the chart.

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]
    }
  ]
};
Copy after login
  1. Render chart

Apply configuration parameters to the chart by calling the chart.setOption method.

chart.setOption(option);
Copy after login

3. Combined with the PHP interface to transfer data

  1. Back-end data processing

In the PHP interface, from the database or other data sources according to business needs Obtain data from and process the data.

$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 格式输出
Copy after login
  1. Front-end data request

Use the XMLHttpRequest object in JavaScript to send a data request to the php interface and parse the returned data.

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();
Copy after login

4. Implementation of different types of charts

  1. Bar chart
var option = {
  title: {
    text: '条形图'
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['类别1', '类别2', '类别3']
  },
  series: [
    {
      name: '系列1',
      type: 'bar',
      data: [10, 20, 30]
    }
  ]
};
Copy after login
  1. pie chart
var option = {
  title: {
    text: '饼图'
  },
  series: [
    {
      name: '系列1',
      type: 'pie',
      radius: '55%',
      data: [
        {value: 10, name: '类别1'},
        {value: 20, name: '类别2'},
        {value: 30, name: '类别3'}
      ]
    }
  ]
};
Copy after login
  1. Line chart
var option = {
  title: {
    text: '折线图'
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['类别1', '类别2', '类别3']
  },
  yAxis: {},
  series: [
    {
      name: '系列1',
      type: 'line',
      data: [10, 20, 30]
    }
  ]
};
Copy after login

5. Summary

By combining ECharts and php interfaces, we can easily realize the statistical chart display of multi-dimensional data. Through the rich chart types and interactive operations of ECharts, as well as the data processing and transmission of the PHP interface, we can meet the data display of different business needs. I hope this article will be helpful for implementing statistical chart display using ECharts and php.

The above is the detailed content of How to combine ECharts and php interface to realize statistical chart display of multi-dimensional data. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template