Home > Article > Backend Development > How to use the php interface and ECharts to generate dynamically updated real-time statistical charts
How to use the php interface and ECharts to generate dynamically updated real-time statistical charts requires specific code examples
With the continuous development of technology, data analysis and visualization have become modern One of the essential tools for businesses and institutions. As a popular JavaScript data visualization library, ECharts has become one of the preferred tools for data visualization. By combining the PHP interface with ECharts, you can achieve more flexible and dynamic data visualization effects.
This article will introduce how to use the PHP interface and ECharts to generate dynamically updated real-time statistical charts, and provide specific code examples to help readers understand related technologies and implementation methods.
1. Preparation
Before we start, we need to understand the following technologies and tools:
After preparing the above tools and technologies, we can start the specific implementation.
2. Implementation process
Next, we will introduce how to use the PHP interface and ECharts to generate dynamically updated real-time statistical charts, and provide specific code examples.
First, we need to create a database and create a table to store data. Here we create a database named "stats" and a table named "data" in it to store data.
The table structure is as follows:
CREATE TABLE `data` ( `id` int(11) NOT NULL AUTO_INCREMENT, `value` int(11) NOT NULL, `time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
Next, we need to write a php interface to provide data to the front end. In this example, we will write an interface named "get_data.php" to obtain the last 10 pieces of data and return them to the front end in JSON format.
<?php // 连接数据库 $host = 'localhost'; $user = 'root'; $password = ''; $database = 'stats'; $mysqli = new mysqli($host, $user, $password, $database); if ($mysqli->connect_error) { die('Connect Error(' . $mysqli->connect_errno . ') ' . $mysqli->connect_error); } // 获取数据 $data = array(); $query = "SELECT * FROM data ORDER BY time DESC LIMIT 10"; $result = $mysqli->query($query); if ($result->num_rows > 0) { while ($row = $result->fetch_assoc()) { $data[] = $row; } } // 返回JSON数据 header('Content-Type: application/json'); echo json_encode($data); // 关闭数据库连接 $mysqli->close(); ?>
Next, we need to write a front-end page to display data and generate charts. In this example, we will write a page named "index.html" to display the last 10 pieces of data and generate a line chart that updates in real time.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts实时统计图</title> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 800px; height: 400px;"></div> <script> // 初始化图表 var chart = echarts.init(document.getElementById('chart')); // 设置图表配置项 var option = { title: { text: '实时统计图' }, tooltip: { trigger: 'axis', axisPointer: { animation: false } }, legend: { data:['实时数据'] }, xAxis: { type: 'time', splitLine: { show: false } }, yAxis: { type: 'value', splitLine: { show: false } }, series: [{ name: '实时数据', type: 'line', showSymbol: false, hoverAnimation: false, data: [] }] }; chart.setOption(option); // 定时更新图表数据 setInterval(function() { $.getJSON('get_data.php', function(data) { option.series[0].data = data.reverse(); chart.setOption(option); }); }, 1000); </script> </body> </html>
In this example, we use the ECharts JavaScript library and define a div named "chart" to display the line chart. We also define a timer to update the chart data every 1 second.
Finally, we need to insert some test data into the database to test whether the entire system is working properly. In this example, we will insert 100 randomly generated data into the "data" table.
You can use the following code to insert data in batches:
<?php // 连接数据库 $host = 'localhost'; $user = 'root'; $password = ''; $database = 'stats'; $mysqli = new mysqli($host, $user, $password, $database); if ($mysqli->connect_error) { die('Connect Error(' . $mysqli->connect_errno . ') ' . $mysqli->connect_error); } // 插入测试数据 for ($i = 1; $i <= 100; $i++) { $value = rand(1, 100); $time = date('Y-m-d H:i:s', strtotime('-' . $i . ' seconds')); $query = "INSERT INTO data (value, time) VALUES ('$value', '$time')"; $result = $mysqli->query($query); } // 关闭数据库连接 $mysqli->close(); ?>
3. Summary
Through the above implementation process, we can use the php interface and ECharts to generate dynamically updated real-time statistical charts . In practical applications, we can adjust and modify it according to specific needs to meet different data visualization needs.
In short, the combination of PHP interface and ECharts can help us achieve more flexible and dynamic data visualization, providing reliable tools and support for data analysis and decision-making.
The above is the detailed content of How to use the php interface and ECharts to generate dynamically updated real-time statistical charts. For more information, please follow other related articles on the PHP Chinese website!