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

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

1008 people have browsed it

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

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

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

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

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

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

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

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

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

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!