Home > Article > Backend Development > How to generate interactive statistical charts through the php interface and ECharts

How to generate interactive statistical charts through the php interface and ECharts

WBOYOriginal: 2023-12-18 13:07:16966browse

In modern applications, the visualization of data is becoming more and more popular. Statistical charts are a great way to visualize data and can easily help users understand trends in data. ECharts is a powerful front-end chart framework that provides rich chart types and interactive functions. Php is a very popular backend language that makes it easy to generate dynamic content and interfaces. In this article, we will introduce how to use the PHP interface and ECharts to generate interactive statistical charts, and provide specific code examples.

1. What is php interface?

An interface is a mechanism that allows communication between different systems. In web development, interfaces connect different applications together and make it easy to transfer data between different systems. Typically, a web application provides an API (Application Programming Interface) to allow third-party applications to use its data and functionality. PHP is a great language for providing APIs because it can easily interact with databases and has great code portability.

2. What is ECharts?

ECharts is an open source JavaScript chart library that can generate many types of charts and has a variety of interactive functions. Because it is built on JavaScript, it can be easily displayed on web pages and works well with other JavaScript frameworks such as jQuery. ECharts provides a rich API that makes it easy to customize charts and provides multiple ways to load data.

3. How to use the php interface and ECharts to generate interactive statistical charts?

Below we will introduce how to use the php interface and ECharts to generate interactive statistical charts. The specific steps are as follows:

1. Data acquisition

First, we need to obtain the data from the database or obtain data from other data sources. This can be done via PHP and requires converting the data into JSON format. The following is a sample code to convert data in the MySQL database into JSON format:

    <?php
        $servername = "localhost";
        $username = "username";
        $password = "password";
        $dbname = "myDB";
 
        // 创建连接
        $conn = new mysqli($servername, $username, $password, $dbname);
 
        // 检查连接
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
        }
 
        // 查询数据库
        $sql = "SELECT id, firstname, lastname, email FROM MyGuests";
        $result = $conn->query($sql);
 
        // 将结果转换为JSON格式
        $data = array();
        if ($result->num_rows > 0) {
            while($row = $result->fetch_assoc()) {
                $data[] = $row;
            }
        }
        $json_data = json_encode($data);
 
        // 关闭连接
        $conn->close();
    ?>

2. Chart generation

In the PHP interface, we can return JSON data to the front end, and the front end will This data serves as the data source for ECharts. The following is a sample code for using ECharts to generate a line chart:

    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts图表示例</title>
        <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
    </head>
    <body>
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById('main'));
            var option = {
                title: {
                    text: '折线图示例'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'line',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
            myChart.setOption(option);
        </script>
    </body>
    </html>

In the above sample code, we created an ECharts object (through the init method), and used the option object to configure various properties of the chart (title , legend, x-axis and y-axis, etc.). We also define an array containing the sales data and pass it to the chart's series (via the series property).

3. Data interaction

Finally, we need to send data from the PHP interface to the front end through Ajax or other methods. Here is an example of loading data into an ECharts chart using jQuery and Ajax:

    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts图表示例</title>
        <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
        <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById('main'));
            $.getJSON("data.php", function(data) {
                var option = {
                    title: {
                        text: '折线图示例'
                    },
                    tooltip: {},
                    legend: {
                        data:['销量']
                    },
                    xAxis: {
                        data: data.categories
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'line',
                        data: data.data
                    }]
                };
                myChart.setOption(option);
            });
        </script>
    </body>
    </html>

In the above example code, we use jQuery’s getJSON function to load data from the PHP interface. The first parameter of this function is the URL pointing to the PHP interface, and the second parameter is a callback function that accepts the data obtained from the PHP interface and uses it as the data source of ECharts. We also convert the data into the correct format and load it into a line chart using ECharts' API.

The above are all the steps on how to use the PHP interface and ECharts to generate interactive statistical charts. If you want to implement more complex charts, you can visit the ECharts official documentation or find more examples in the ECharts GitHub repository. and API.

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

php JavaScript mysql json jquery ajax echarts 回调函数接口对象 github 数据库

Statement：

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

Previous article：How to use ECharts and php interface to implement various types of statistical chartsNext article：How to use ECharts and php interface to implement various types of statistical charts

See more

How to generate interactive statistical charts through the php interface and ECharts

Related articles