Symfony 报表系统需集成 Chart.js：安装并导入库，创建返回 JSON 数据的 API 接口（如近 7 天销售趋势），Twig 模板中用 canvas 元素 + fetch + Chart 构造函数渲染；支持多图表切换，推荐销毁旧实例后重建或复用配置字典。
在 Symfony 项目中快速搭建一个支持动态图表的报表系统，需集成 Chart.js 前端渲染能力，并通过控制器返回结构化数据（如 JSON），避免手动拼接 HTML 或硬编码图表配置。
安装 Chart.js 并引入到前端
在项目根目录执行：yarn add chart.js 或 npm install chart.js。
编辑 assets/app.js，添加 import 语句：import Chart from 'chart.js/auto';。
运行 npm run build 生成新 assets；若使用 encore dev server，确保它正在运行并监听变更。
创建报表数据 API 接口
新建控制器 src/Controller/ReportController.php，定义 getSalesData 方法，返回 JSON 格式销售趋势数据。
在路由中为该方法添加注解：@Route("/api/reports/sales", name="api_report_sales", methods={"GET"})。
方法内用 Doctrine 查询近 7 天订单总金额，按日期分组聚合，结果以 ['labels' => [...], 'datasets' => [[...]]] 结构返回 Response，【必须设置响应头为 application/json】。
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
在 Twig 模板中初始化 Chart.js 实例
创建 templates/report/sales.html.twig，引入已构建的 build/app.css 和 build/app.js。
在页面底部添加一个 <canvas id="salesChart"></canvas> 元素，Chart.js 会绑定到这个 DOM 节点。
用 fetch('/api/reports/sales') 请求数据，成功后调用 new Chart(ctx, { type: 'line', data: ..., options: {...} }) 渲染图表；【注意：ctx 必须来自 canvas 的 getContext('2d')，不能直接传 canvas 元素】。
扩展多图表类型与动态切换
方法一：在模板中预置多个 canvas，ID 分别为 salesChart、userChart、categoryChart，对应不同控制器接口。
方法二：用下拉框触发 fetch 切换数据源，再销毁旧实例（chart.destroy()）、创建新实例，防止内存泄漏和重复渲染。
方法三：将图表配置抽离为 JS 对象字典，例如 const configs = { line: { type: 'line', ... }, bar: { type: 'bar', ... } }，切换时仅替换 type 和 data 字段，复用初始化逻辑。
