php集成ECharts做统计图表步骤_php后端传数据前端渲染法【步骤】

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

php集成echarts做统计图表步骤_php后端传数据前端渲染法【步骤】

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 配置项如 titleseriesxAxis 等不能写成中文)
  • 数值类字段(如 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);

前端用 fetchAJAX 获取 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 的 datestrtotime 要对齐前端时区

ECharts 的 xAxis.type = 'time' 期望时间戳为毫秒数(13 位),而 PHP time() 返回的是秒级时间戳(10 位)。直接丢进去会导致时间轴错乱或空白。

BgSub

BgSub

免费的AI图片背景去除工具

下载

立即学习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。

https://www.php.cn/faq/2032311.html

发表回复

Your email address will not be published. Required fields are marked *