PHP と Vue.js を使用してレスポンシブな統計グラフを作成する方法

//连接数据库
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database";

$conn = new mysqli($servername, $username, $password, $dbname);

//检查连接是否成功
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

//创建表
$sql = "CREATE TABLE IF NOT EXISTS statistics (
    id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(30) NOT NULL,
    value INT(11) NOT NULL
)";

//执行SQL语句
if ($conn->query($sql) === TRUE) {
    echo "Table created successfully";
} else {
    echo "Error creating table: " . $conn->error;
}

//插入数据
$sql = "INSERT INTO statistics (name, value)
VALUES ('Category 1', 100), ('Category 2', 200), ('Category 3', 300)";

if ($conn->query($sql) === TRUE) {
    echo "Records inserted successfully";
} else {
    echo "Error inserting records: " . $conn->error;
}

$conn->close();

<template>
    <div>
        <h1>统计图表</h1>
        <div id="chart"></div>
    </div>
</template>

<script>
export default {
    mounted() {
        //使用axios从服务器获取数据
        axios.get('/api/data.php')
            .then(response => {
                //将获取的数据转换为数组
                let data = response.data.map(item => {
                    return [item.name, item.value];
                });

                //使用echarts生成图表
                let chart = echarts.init(document.getElementById('chart'));
                let option = {
                    title: {
                        text: '统计图表'
                    },
                    tooltip: {},
                    xAxis: {
                        type: 'category',
                        data: data.map(item => item[0])
                    },
                    yAxis: {},
                    series: [{
                        name: '数量',
                        type: 'bar',
                        data: data.map(item => item[1])
                    }]
                };

                chart.setOption(option);
            })
            .catch(error => {
                console.log(error);
            });
    }
}
</script>

<?php
//连接数据库
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database";

$conn = new mysqli($servername, $username, $password, $dbname);

//检查连接是否成功
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

//查询数据
$sql = "SELECT * FROM statistics";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    $data = array();
    //将查询结果转换为关联数组
    while($row = $result->fetch_assoc()) {
        array_push($data, $row);
    }
    //将数据以JSON格式返回给前端
    echo json_encode($data);
} else {
    echo "0 results";
}

$conn->close();
?>