ThinkPHP图表问题根源在PHP层JSON输出不规范、DOM未就绪及字段不一致；须用return json()返回纯数组、确保DOM存在后再init、严格匹配前后端字段名。
ThinkPHP 本身不画图，也不生成图表文件；它只负责把结构化数据以纯 JSON 格式安全吐给前端，由 ECharts、Chart.js 这类库在浏览器里渲染。90% 的“图表不显示”问题，根源不在 JS 写错，而在 PHP 层混入了 HTML、调试输出，或 JSON 格式被破坏。
控制器怎么返回合法 JSON 数据
必须用 return json($data)（TP6）或 return $this->success('', '', $data)（TP5.1），不能用 echo json_encode() + exit —— 后者不会自动设 Content-Type: application/json，fetch 会当 HTML 解析，直接报错。
- 确保
$data是原生 PHP 数组，不要含对象、资源、闭包；时间字段建议转成字符串（如date('Y-m-d', $ts)），避免前端解析失败 - 禁用
var_dump、print_r、echo 'debug'等任何输出；开启app_debug = true时，ThinkPHP 可能注入调试信息，导致 JSON 头尾多出 HTML 片段 - 数据库聚合推荐用
Db::name('sales')->sum('amount')或field('DATE_FORMAT(created_at, "%Y-%m") as month, sum(amount) as total')->group('month')->select()，别在 PHP 里循环累加
ECharts 初始化总报 “Cannot set property ‘option’ of null”
这是 DOM 元素还没挂载就调用了 echarts.init()。不是接口没通，是 JS 执行时机错了。
-
<div id="chart" style="width: 600px; height: 400px;"></div>必须在 HTML 中静态存在，不能靠 JS 动态插入后再 init - JS 代码不能写在
<head>里（除非加defer）；推荐包裹在document.addEventListener('DOMContentLoaded', () => { ... })或放在<body>底部 - 务必加判空：
const el = document.getElementById('chart'); if (!el) return;，防止模板未渲染完成就执行 - 若用 Vue/React，初始化必须在
mounted/useEffect(() => { ... }, [])中，而非组件定义时
后端返回的数据结构怎么配才不翻车
字段名必须和前端 option 中的 key 完全一致，大小写、下划线都不能错。ECharts 不做容错映射，错一个就空白。
立即学习“PHP免费学习笔记（深入）”；
- 柱状图/折线图：返回
['xAxis' => ['1月', '2月'], 'series' => [12000, 18500]]，前端取option.xAxis.data和option.series[0].data - 饼图：返回
[['name' => 'iOS', 'value' => 45], ['name' => 'Android', 'value' => 55]]，注意是关联数组，不是索引数组 - 时间轴（Timeline）：后端只按时间顺序返回原始事件列表，如
[{'event_date' => '2024-01-01', 'title' => '上线'}]；前端再转成timeline.data，别在 PHP 层拼整个option字符串——难调试、易 XSS、体积大
查数据库慢、JSON 响应超时怎么办
大数据量下，一次查几万条再 PHP 组装，既拖慢接口又撑爆内存。得从 SQL 层就控制。
- 用
limit+page分页查，或用whereTime('created_at', '>=', '2024-01-01')缩小范围 - 聚合统计优先走数据库：比如日活，用
Db::name('log')->whereTime('time', 'today')->count()，别select()全量再 count - 字段精简：用
field('date as name, sum(pv) as value')，别field('*')；中文字段加反引号：field('`category_name`') - 高频报表考虑加 Redis 缓存，或改用定时任务预计算结果存表，接口只读缓存
最常被忽略的是：前后端字段命名一致性、DOM 就绪判断、以及调试模式下多出的 HTML 干扰。这三处不检查，写再漂亮的 ECharts 配置也没用。
