如何通过PHP和Vue.js实现用户交互式统计图表

 100,
        "二月" => 200,
        // ...
        "十二月" => 300
    ];
    
    echo json_encode($data);
?>

new Vue({
    el: '#app',
    mounted() {
        this.fetchData();
    },
    methods: {
        fetchData() {
            // 发送Ajax请求获取数据
            fetch('data.php')
                .then(response => response.json())
                .then(data => {
                    // 绘制图表
                    this.drawChart(data);
                })
                .catch(error => console.error(error));
        },
        drawChart(data) {
            // 创建一个Canvas元素
            const canvas = document.getElementById('chart');

            // 创建图表
            new Chart(canvas, {
                type: 'bar',
                data: {
                    labels: Object.keys(data),
                    datasets: [{
                        label: '销售额',
                        data: Object.values(data),
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }
    }
});