必须等待DOM就绪后再初始化图表，即用DOMContentLoaded事件或把script置于</body>前，确保document.getElementById能获取到容器；多图表需ID唯一；容器父级须设明确宽高，否则响应式模式下渲染区域为0；初始化后窗口变化需手动调用resize()。
HTML模板里怎么把数据塞进图表容器
不能靠写死 HTML 标签或手动拼 innerHTML，否则数据一变就得改代码。真正可靠的做法是：用 JavaScript 拿到 DOM 容器（比如 <div id="chart"></div>），再交给可视化库初始化——Chart.js 用 getContext('2d')，ECharts 用 echarts.init()，D3 则直接选中容器挂 SVG。
常见错误是 DOM 还没加载完就执行初始化，结果 document.getElementById 返回 null。必须等 DOMContentLoaded 或把 script 放在 </body> 前。
- 别在
<head>里直接调用echarts.init(document.getElementById('main')) - 别用
setTimeout猜 DOM 加载时间，不可靠 - 如果模板含多个图表，每个
id必须唯一，重复会导致只渲染第一个
Chart.js 和 ECharts 的数据注入方式差异
两者都接受 JSON 结构数据，但字段名和嵌套层级不同，硬套会报错。Chart.js 要求 data.labels 和 data.datasets 平级；ECharts 的 series 是顶层字段，xAxis/yAxis 单独配置，且支持更细粒度的坐标轴类型（如 value、category、time）。
参数差异直接影响数据清洗方向：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- Chart.js 默认把
labels当字符串数组，若后端返回数字 ID，得先.map(String)否则坐标轴错位 - ECharts 的
series.data可以是二维数组[[x, y], [x, y]]或对象数组{name: 'A', value: 10}，但类型必须统一，混用会静默失败 - 两者都不自动处理 null/undefined，需提前过滤或替换为
NaN（Chart.js）或-（ECharts）
用 innerHTML 注入原始数据容易踩的坑
有人图省事，在 HTML 里写 <script>const rawData = <%= JSON.stringify(data) %></script>（服务端模板），或用 innerHTML 把 JSON 字符串塞进隐藏 <div> 再解析。这看似简单，实际埋雷：
- JSON 中含单引号或未转义 HTML 字符（如
<、&）会导致 JS 解析失败或 XSS -
innerHTML插入后需额外JSON.parse()，多一层出错可能；而直接通过fetch或模块导入的数据天然是 JS 对象 - 服务端渲染时若数据量大，HTML 体积暴涨，首屏加载慢，且无法利用浏览器缓存
更稳的做法：前端用 fetch('/api/chart-data') 拉数据，再传给图表实例；或用 data-* 属性存轻量元信息（如 data-chart-type="line"），数据仍走 API。
响应式容器塌缩时图表不显示的根因
很多模板里图表“突然消失”，不是 JS 报错，而是容器宽高为 0。原因很直接：<canvas> 或 <div id="main"> 的父级没设尺寸，CSS 里又没写 width: 100%，导致可视化库计算渲染区域时得到 0×0。
Chart.js 默认开启 responsive: true，但它只监听父容器尺寸变化，不负责撑开容器本身；ECharts 的 resize() 方法也依赖容器有真实尺寸。
- 务必给图表容器外层加一个带明确
width和height的<div>，比如<div style="width: 100%; height: 400px"><div id="chart"></div></div> - 避免仅靠
flex或grid子项自身设flex: 1，父容器必须有可计算的高度（如min-height或固定height） - 用 Chrome DevTools 的 Layout Inspector 查看元素 computed size，比猜更准
最常被忽略的是：图表初始化之后，窗口 resize 或 tab 切换回来时，必须手动调用 myChart.resize() 或 myEcharts.resize()，否则图表不会自适应新尺寸。
