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
<?php
namespace app\controller;
use think\Controller;
class Chart extends Controller
{
public function salesData()
{
// 模拟数据库查询（实际应替换为 Db::table()->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 模板中需有容器元素（<div id="chart" style="width: 600px; height: 400px;"></div>），且确保 DOM 加载完成后再初始化 ECharts。
立即学习“PHP免费学习笔记（深入）”；
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const chartDom = document.getElementById('chart');
const myChart = echarts.init(chartDom);
fetch('{:url("chart/salesData")}')
.then(res => res.json())
.then(data => {
myChart.setOption({
xAxis: { type: 'category', data: data.xAxis },
yAxis: { type: 'value' },
series: [{
name: '销售额',
type: 'bar',
data: data.series
}]
});
})
.catch(err => console.error('图表数据加载失败:', err));
});
</script>
- 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 < in JSON at position 0→ 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 —— 这些地方一漏，图表就静默失败。
