如何在PHP和Vue.js中實現可視化的經濟指標統計圖表
隨著大數據和數據分析的發展,可視化的經濟數據統計圖表越來越受到人們的關注。在Web開發中,PHP作為後端語言和Vue.js作為前端框架,提供了一個強大的組合,可以用來實現這樣的目標。本文將介紹如何使用PHP和Vue.js來建立視覺化的經濟指標統計圖表,並附有程式碼範例。
<?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); }); } } });
總結
在本文中,我們學習如何使用PHP和Vue.js來建立視覺化的經濟指標統計圖表。我們示範如何透過PHP查詢資料庫取得數據,並使用Vue.js和Chart.js產生統計圖表。透過使用這些技術,你可以輕鬆地實現可視化的經濟指標統計功能。希望本文對你有幫助!
以上是如何在PHP和Vue.js中實現可視化的經濟指標統計圖表的詳細內容。更多資訊請關注PHP中文網其他相關文章!