How to implement visual economic indicator statistical charts in PHP and Vue.js-PHP Tutorial-php.cn

How to implement visual economic indicator statistical charts in PHP and Vue.js

WBOY

Release： 2023-08-18 17:50:02

Original

1426 people have browsed it

How to implement visual economic indicator statistical charts in PHP and Vue.js

With the development of big data and data analysis, visual economic data statistical charts are becoming more and more popular. have attracted more and more attention from people. In web development, PHP as a back-end language and Vue.js as a front-end framework provide a powerful combination that can be used to achieve such goals. This article will introduce how to use PHP and Vue.js to create visual statistical charts of economic indicators, with code examples.

Preparation work
First, we need to install the development environment of PHP and Vue.js. Make sure you have PHP installed, as well as an integrated development environment like XAMPP or WAMP that provides the Apache server and MySQL database. In addition, we also need to use npm to install and manage Vue.js.
Create database and data table
Create a database in MySQL to store data on economic indicators. For example, we use a database named "economics" and create a data table named "indicators" containing the fields "id", "name", "value" and "year". Please modify the table structure according to your needs.
Writing PHP code
In PHP, we can use the mysqli extension to connect to the database and obtain economic indicator data by querying the database. Here is a simple code example:

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "economics";

// 创建数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接是否成功
if ($conn->connect_error) {
    die("连接数据库失败：" . $conn->connect_error);
}

// 查询数据库获取经济指标数据
$sql = "SELECT * FROM indicators";
$result = $conn->query($sql);

// 将数据转换为JSON格式
$data = array();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}

// 输出JSON数据
echo json_encode($data);

// 关闭数据库连接
$conn->close();
?>

Copy after login

Creating a Vue.js application
Now, we can use Vue.js to create our front-end application. First, create an HTML file and introduce the Vue.js library and Chart.js library (used to generate statistical charts). The following is a simple HTML structure example:

<!DOCTYPE html>
<html>
<head>
    <title>经济指标统计图表</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div id="app">
        <canvas id="chart"></canvas>
    </div>

    <script src="app.js"></script>
</body>
</html>

Copy after login

Writing Vue.js code
Create a JavaScript file named "app.js" for writing Vue.js applications code. Here is a simple code example:

new Vue({
    el: '#app',
    mounted() {
        this.fetchData();
    },
    methods: {
        fetchData() {
            // 使用axios库发送GET请求
            axios.get('api.php')
            .then(response => {
                // 获取经济指标数据
                const data = response.data;

                // 处理数据并生成图表
                const ctx = document.getElementById('chart').getContext('2d');
                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: data.map(d => d.year),
                        datasets: [{
                            label: '经济指标',
                            data: data.map(d => d.value),
                            backgroundColor: 'rgba(75, 192, 192, 0.2)',
                            borderColor: 'rgba(75, 192, 192, 1)',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true
                    }
                });
            })
            .catch(error => {
                console.log(error);
            });
        }
    }
});

Copy after login

Run the application
Place the HTML files and JavaScript files in the appropriate directories, start your Apache server, and run the application in the browser Open the HTML file. You will see a page with statistical charts visualizing economic indicators.

Summary
In this article, we learned how to use PHP and Vue.js to create visual statistical charts of economic indicators. We demonstrated how to query the database to obtain data through PHP, and use Vue.js and Chart.js to generate statistical charts. By using these technologies, you can easily implement visual statistical functions of economic indicators. Hope this article is helpful to you!

The above is the detailed content of How to implement visual economic indicator statistical charts in PHP and Vue.js. For more information, please follow other related articles on the PHP Chinese website!