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";
// 創(chuàng)建數(shù)據(jù)庫(kù)連接
$conn = new mysqli($servername, $username, $password, $dbname);
// 檢查連接是否成功
if ($conn->connect_error) {
die("連接數(shù)據(jù)庫(kù)失?。?quot; . $conn->connect_error);
}
// 查詢數(shù)據(jù)庫(kù)獲取經(jīng)濟(jì)指標(biāo)數(shù)據(jù)
$sql = "SELECT * FROM indicators";
$result = $conn->query($sql);
// 將數(shù)據(jù)轉(zhuǎn)換為JSON格式
$data = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$data[] = $row;
}
}
// 輸出JSON數(shù)據(jù)
echo json_encode($data);
// 關(guān)閉數(shù)據(jù)庫(kù)連接
$conn->close();
?>- 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>經(jīng)濟(jì)指標(biāo)統(tǒng)計(jì)圖表</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>- 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庫(kù)發(fā)送GET請(qǐng)求
axios.get('api.php')
.then(response => {
// 獲取經(jīng)濟(jì)指標(biāo)數(shù)據(jù)
const data = response.data;
// 處理數(shù)據(jù)并生成圖表
const ctx = document.getElementById('chart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: data.map(d => d.year),
datasets: [{
label: '經(jīng)濟(jì)指標(biāo)',
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);
});
}
}
});- 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!