ThinkPHP搭建数据分析平台的核心是后端只提供标准JSON接口，前端用ECharts渲染图表；报表导出分服务端（Excel）和前端（图片）两类实现，调试需检查接口响应、字段一致性及JS错误。
ThinkPHP 搭建数据分析平台，核心是“后端只管数据，前端专注呈现”。ECharts 负责图表渲染与交互，ThinkPHP 只需提供结构清晰、编码统一、响应标准的 JSON 接口；报表导出则通过服务端生成文件（如 Excel 或 PDF）或前端触发图片下载，两者职责分明、互不干扰。
一、ECharts 图表展示：前后端分工要明确
ThinkPHP 不画图，只输出数据。控制器查库、聚合、格式化，然后返回纯 JSON：
- 用 Db::query() 或模型执行聚合查询，例如按月统计销售额：
SELECT DATE_FORMAT(create_time, '%Y-%m') AS month, SUM(amount) AS total FROM orders GROUP BY month - 把结果组织成 ECharts 所需结构：柱状图需
['2026-01', '2026-02']和[12000, 18500]两个数组；饼图需[{name: '华东', value: 42}, {name: '华南', value: 33}] - 设置响应头
Content-Type: application/json; charset=utf-8，再调用return json($data)（ThinkPHP 6+）或echo json_encode($data, JSON_UNESCAPED_UNICODE | JSON_NUMERIC_CHECK)（兼容老版本）
二、前端初始化图表：加载时机与错误处理不能少
HTML 中准备一个有宽高的容器，例如：<div id="sales-chart" style="width:100%;height:400px;"></div>。JS 部分注意三点：
- 确保 DOM 加载完成后再初始化：
const chart = echarts.init(document.getElementById('sales-chart')) - 用
fetch或axios请求 ThinkPHP 接口，如/api/report/monthly-sales，拿到响应后调用chart.setOption() - 加上
chart.showLoading()和chart.hideLoading()，空数据时显示提示文字，请求失败时弹出友好提示
三、报表导出功能：分服务端生成与前端截图两类
导出不是图表渲染的延伸，而是独立能力，按需选择实现方式：
立即学习“PHP免费学习笔记（深入）”；
-
导出为 Excel（推荐服务端）：用 PhpSpreadsheet 库，在控制器中组装二维数组，写入单元格，设置表头样式，最后用
header()输出 .xlsx 文件流，浏览器自动下载 -
导出为图片（推荐前端）：调用
chart.getDataURL({type: 'png', pixelRatio: 2})获取 base64 图片数据，再用fetch提交到 ThinkPHP 的接收接口（如/api/export/image），服务端解码保存并返回访问路径 - 避免在 PHP 层直接调用 ECharts 渲染——它运行在浏览器，服务端无 DOM 环境，强行 SSR 会引入 PhantomJS 等复杂依赖，得不偿失
四、调试关键点：接口通了图表还不动？先查这三项
90% 的图表空白问题集中在基础环节：
- 打开浏览器开发者工具 → Network → 点击图表接口 → 查看响应内容是否为合法 JSON（无 HTML 标签、无 PHP 错误提示、无中文乱码）
- 确认数据库字段、PHP 数组键名、ECharts option 中的字段名三者完全一致（大小写、下划线、复数形式都要匹配）
- 检查控制台是否有
echarts is not defined或Cannot set property 'data' of undefined类型报错，对应补全 JS 引入或校验数据结构
