ECharts 是纯前端图表库，ThinkPHP 仅提供 JSON 数据接口；需控制器用 json_encode() 输出结构化数据，前端通过 axios/fetch 获取后渲染图表，避免在 PHP 层生成图表或混入 HTML 内容。
确认 ECharts 版本与 ThinkPHP 前后端分工
ECharts 是纯前端图表库，ThinkPHP 只负责提供结构化数据（通常是 JSON），不渲染图表本身。常见误区是试图在 PHP 层“生成图表”，结果卡在模板渲染或 JS 加载时机上。
关键点在于：ThinkPHP 控制器输出 json_encode() 后的数据，前端用 axios 或 fetch 请求该接口，再传给 ECharts 实例。
- 推荐使用 ECharts 5.x（稳定、文档全），避免 6.x 的按需引入复杂度
- ThinkPHP 版本建议 6.0+（支持 RESTful 风格路由和 JSON 自动响应）
- 不要把
echarts.min.js放进 ThinkPHP 的public/static后就以为“集成完成”——JS 加载顺序、DOM 渲染时机、数据异步加载失败都得手动处理
ThinkPHP 后端准备 JSON 数据接口
控制器里返回干净的数组，不带 HTML、不 echo 其他内容，否则 JSON 解析会失败。
// app/controller/Chart.php
select()）
$data = [
['month' => '1月', 'amount' => 12000],
['month' => '2月', 'amount' => 18500],
['month' => '3月', 'amount' => 15300],
];
return json(['xAxis' => array_column($data, 'month'), 'series' => array_column($data, 'amount')]);
}
}
- 必须用
return json(...)（TP6）或return $this->success(...)（TP5.1），确保 Content-Type 是application/json - 字段名（如
xAxis、series）要和前端 JS 中取值一致，别写成categories或dataList后忘了同步改 JS - 如果数据量大，加
set_time_limit(0)和分页/聚合逻辑，避免超时或内存溢出
前端页面引入 ECharts 并初始化图表
HTML 模板中需有容器元素（），且确保 DOM 加载完成后再初始化 ECharts。
初阶PHP Apache MySQL网站设计
下载
初阶PHP Apache MySQL网站设计来自作者多年学习、应用和讲授PHP的经验与体会，是专为学习PHP+MySQL数据库编程人员编与的入门教材。在最后二章设计了2个贴近实际应用的典型案例：留言本系统和论坛系统，每个案例先介绍开发思路、步骤，再给出全部源代码，使所学内容与实际应用紧密结合，特别是论坛系统将全书的案例串讲起来，力求使读者学到最贴近应用前沿的知识和技能。
立即学习“PHP免费学习笔记（深入）”；
- TP6 模板中用
{:url('chart/salesData')}，TP5.1 用{:url('chart/salesData')}或完整 URL - 务必检查浏览器控制台 Network 标签页：请求是否 200？响应体是不是合法 JSON？有没有跨域？
- 如果图表空白，先在
console.log(data)确认数据结构，再查myChart.setOption是否被调用（DOM 未挂载会导致初始化失败）
处理常见报错和兼容性问题
最常卡住的地方不是代码写错，而是环境细节没对齐：
-
TypeError: Cannot read property 'init' of undefined→ ECharts JS 未加载成功，检查网络请求或 CDN 地址是否被拦截 SyntaxError: Unexpected token → ThinkPHP 返回了 HTML（比如 404 页面或调试信息），检查路由是否匹配、控制器方法是否存在、是否开启了调试模式导致输出额外内容- 中文乱码 → ThinkPHP 默认输出 UTF-8，但若数据库或模板编码不是 UTF-8，
json_encode()会返回null；统一用mb_convert_encoding()或设置数据库连接 charset - IE11 不支持
fetch→ 换成$.get()（需引入 jQuery）或加whatwg-fetchpolyfill
真正麻烦的从来不是“怎么画柱状图”，而是数据格式对不上、请求路径写错、JSON 中混入 HTML 注释、或者 ECharts 初始化时容器高度为 0 —— 这些地方一漏，图表就静默失败。
