17370845950

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 中转换：将 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。