php调用数据可视化_php调用ECharts生成统计图表-php教程-PHP中文网

php调用数据可视化_php调用ECharts生成统计图表

絕刀狂花

发布： 2025-10-21 16:49:01

原创

419人浏览过

答案：PHP与ECharts结合实现数据可视化需通过PHP输出JSON数据，前端用AJAX获取并渲染图表。具体步骤包括引入ECharts库、创建PHP接口返回格式化数据（如月销售额），前端初始化图表容器并通过fetch请求数据，最后配置option渲染柱状图；扩展建议含使用PDO防注入、添加错误处理及加载提示等，确保安全与体验。

php调用数据可视化_php调用echarts生成统计图表

在Web开发中，使用PHP后端处理数据并结合前端可视化工具生成统计图表是一种常见需求。ECharts 是百度开源的一款功能强大、交互丰富的 JavaScript 图表库，适合与 PHP 配合实现动态数据可视化。

1. 准备工作：引入 ECharts 和准备 PHP 数据接口

要让 PHP 与 ECharts 协同工作，基本思路是：PHP 负责从数据库读取数据并输出为 JSON 格式，前端通过 AJAX 获取该数据，并交由 ECharts 渲染图表。

步骤：

下载 ECharts 库或通过 CDN 引入到页面中
创建一个 PHP 文件用于返回结构化数据（如 JSON）
在 HTML 页面中初始化 ECharts 实例

示例：通过 CDN 引入 ECharts

zuojiankuohaophpcnscript src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

立即学习“PHP免费学习笔记（深入）”；

爱图表

AI驱动的智能化图表创作平台

查看详情

2. PHP 输出 JSON 数据供前端调用

假设我们有一个销售统计数据表，需要展示每月销售额柱状图。PHP 从数据库查询数据并格式化输出。

sales_data.php 示例代码：

<?php<br>// 设置响应头为 JSON<br>header('Content-Type: application/json');<br><br>// 模拟数据（实际可从 MySQL 查询）<br>$data = [<br>    ['month' => '1月', 'sales' => 120],<br>    ['month' => '2月', 'sales' => 180],<br>    ['month' => '3月', 'sales' => 240],<br>    ['month' => '4月', 'sales' => 190],<br>    ['month' => '5月', 'sales' => 260],<br>    ['month' => '6月', 'sales' => 300]<br>];<br><br>// 提取 x 轴和 y 轴数据<br>$months = array_column($data, 'month');<br>$sales  = array_column($data, 'sales');<br><br>// 返回 JSON 结构<br>echo json_encode([<br>    'categories' => $months,<br>    'values'     => $sales<br>]);<br>?>

登录后复制

3. 前端使用 AJAX 获取 PHP 数据并渲染 ECharts 图表

在 HTML 页面中初始化容器，并通过 JavaScript 请求 PHP 接口获取数据。

HTML + JS 示例：

<div id="chart" style="width: 800px; height: 400px;"></div><br><script><br>  // 初始化 echarts 实例<br>  const myChart = echarts.init(document.getElementById('chart'));<br><br>  // 使用 fetch 从 PHP 接口获取数据<br>  fetch('sales_data.php')<br>    .then(response => response.json())<br>    .then(data => {<br>      const option = {<br>        title: { text: '月度销售统计' },<br>        tooltip: {},<br>        xAxis: {<br>          type: 'category',<br>          data: data.categories<br>        },<br>        yAxis: {<br>          type: 'value'<br>        },<br>        series: [{<br>          name: '销售额',<br>          type: 'bar',<br>          data: data.values<br>        }]<br>      };<br>      myChart.setOption(option);<br>    });<br></script>

登录后复制