PHP直接生成ECharts所需JSON数据是最轻量可控方式,需确保UTF-8无BOM、字符集统一、键名为英文、数值不转字符串、时间戳转为毫秒,并用json_encode(..., JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES)输出纯净JSON。

PHP 后端直接生成 ECharts 所需的 JSON 数据并交给前端渲染,是最轻量、最可控的方式——不需要额外 API 接口、不依赖跨域、也不用引入后端图表库。
PHP 构造符合 ECharts 格式的数组并 json_encode
ECharts 只认标准 JSON 结构,前端 echarts.setOption() 接收的是 JavaScript 对象,所以 PHP 必须输出合法、无编码污染的 JSON 字符串。常见错误是:json_encode 前手动拼接字符串、混用中文引号、或未设置 UTF-8 编码导致中文乱码。
- 确保 PHP 文件本身保存为 UTF-8 无 BOM 格式
- 数据库查询结果若含中文,连接时需指定字符集,例如 PDO 构造时加
charset=utf8mb4 - 数组键名必须是英文(ECharts 配置项如
title、series、xAxis等不能写成中文) - 数值类字段(如
data数组中的数字)不要转成字符串,否则柱状图/折线图会渲染失败 - 示例片段:
$chartData = [
'title' => ['text' => '订单数量统计'],
'tooltip' => [],
'xAxis' => [['type' => 'category', 'data' => ['1月', '2月', '3月']]],
'yAxis' => [['type' => 'value']],
'series' => [[
'name' => '订单数',
'type' => 'bar',
'data' => [120, 200, 150]
]]
];
echo json_encode($chartData, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);前端用 fetch 或 AJAX 获取 PHP 输出的 JSON
不要把 PHP 渲染逻辑写在 HTML 模板里内联输出(比如 ),容易被 XSS 过滤或引号冲突。推荐分离数据与脚本。
- PHP 单独建一个
get_chart_data.php,只负责查库 +json_encode+header('Content-Type: application/json') - 前端用
fetch('./get_chart_data.php')请求,响应类型设为json - 注意:如果 PHP 脚本里有
echo其他内容(比如调试var_dump),会导致 JSON 解析失败,浏览器控制台报Unexpected token - 响应成功后,直接传给
myChart.setOption(data)即可
处理时间类数据时,PHP 的 date 和 strtotime 要对齐前端时区
ECharts 的 xAxis.type = 'time' 期望时间戳为毫秒数(13 位),而 PHP time() 返回的是秒级时间戳(10 位)。直接丢进去会导致时间轴错乱或空白。
立即学习“PHP免费学习笔记(深入)”;
- PHP 中转换:将 MySQL 时间字段(如
created_at)转为毫秒时间戳,用(strtotime($row['created_at']) * 1000) - 避免用
date('Y-m-d H:i:s')字符串传给 ECharts —— 它无法自动识别为时间类型,得靠valueFormatter或预处理 - 如果前后端时区不一致(如 PHP 设了
date_default_timezone_set('Asia/Shanghai'),但浏览器在纽约),建议统一用 UTC 时间戳传输,前端由 ECharts 自动按本地时区渲染
真正卡住人的往往不是语法,而是 JSON 格式细节(比如多了一个逗号、中文没加 JSON_UNESCAPED_UNICODE)、时间戳单位错位、或者 PHP 输出了不可见字符(BOM 或空格)。跑通第一步前,先在浏览器直接访问 get_chart_data.php,确认返回的是干净、可解析的纯 JSON。











