Generating Interactive Charts with PHP and ECharts: A Step‑by‑Step Guide
This tutorial explains how to use a PHP interface together with the ECharts JavaScript library and a MySQL database to fetch data, process it on the server, and render dynamic, interactive bar charts in a web page for effective data visualization.
In today’s data‑driven environment, developers often need quick ways to create visual charts and reports, and combining a PHP interface with the ECharts library provides an efficient solution.
The article walks through using MySQL as the data source, retrieving the data with PHP, and feeding it into ECharts to produce visual charts that help decision‑makers interpret information.
Implementation Steps
1. Preparation
Ensure PHP and MySQL are installed, then include ECharts via CDN. For example:
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.1/echarts.min.js"></script>2. Retrieve Data from MySQL
Connect to the database, query the user table, and convert the result set into a PHP array. Sample code:
<?php
$dbname = 'test_db';
$host = 'localhost';
$user = 'root';
$password = '';
$conn = mysqli_connect($host, $user, $password, $dbname);
if (!$conn) { die("Connection failed: " . mysqli_connect_error()); }
$sql = "SELECT * FROM user";
$result = mysqli_query($conn, $sql);
$data = array();
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
$data[] = array('name' => $row['name'], 'age' => (int)$row['age']);
}
}
mysqli_close($conn);
?>The script establishes a connection, fetches all records, and stores them in an array for later use.
3. Generate the ECharts Chart
With the data ready, create an HTML page that initializes ECharts and populates a bar chart based on age distribution. Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bar Chart</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.1/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: { text: 'User Age Distribution' },
tooltip: {},
legend: { data: ['Age'] },
xAxis: { data: ['<18', '19‑25', '26‑35', '36‑45', '>45'] },
yAxis: {},
series: [{ name: 'Age', type: 'bar', data: [] }]
};
option.series[0].data = [
{value:0, name:'<18'}, {value:0, name:'19‑25'}, {value:0, name:'26‑35'}, {value:0, name:'36‑45'}, {value:0, name:'>45'}
];
foreach ($data as $v) {
if ($v["age"] < 18) { echo "option.series[0].data[0].value += 1;"; }
if ($v["age"] >= 19 && $v["age"] <= 25) { echo "option.series[0].data[1].value += 1;"; }
if ($v["age"] >= 26 && $v["age"] <= 35) { echo "option.series[0].data[2].value += 1;"; }
if ($v["age"] >= 36 && $v["age"] <= 45) { echo "option.series[0].data[3].value += 1;"; }
if ($v["age"] > 45) { echo "option.series[0].data[4].value += 1;"; }
}
?>
myChart.setOption(option);
</script>
</body>
</html>The PHP loop counts users in each age bracket and injects JavaScript statements that update the chart data; when the page loads, ECharts renders the bar chart automatically.
Conclusion: By following these steps you can quickly build visual statistical charts using PHP and ECharts, customize chart types and styles as needed, and organize code and configuration for easier maintenance.
php中文网 Courses
php中文网's platform for the latest courses and technical articles, helping PHP learners advance quickly.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.