Home > Article > Backend Development > How to implement visual economic indicator statistical charts in PHP and Vue.js
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.
<?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(); ?>
<!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>
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); }); } } });
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!