Chart.js 三步跑起来：引入 CDN、确保 canvas 元素存在且 ID 匹配、在 DOMContentLoaded 中初始化；ECharts 需检查脚本加载、容器宽高设置及 setOption 更新逻辑。
Chart.js 三步跑起来，适合原型和轻量需求
Chart.js 是最省事的选择，尤其适合刚起步、数据结构简单、图表类型不复杂的场景。它只依赖一个 <canvas> 标签，CDN 引入后几行代码就能出图。
常见错误现象：Failed to create chart: can't acquire context from the given item —— 大概率是 document.getElementById() 拿到的元素为空，或者没等 DOM 加载完就执行初始化。
- 确保
<canvas id="myChart"></canvas>在 HTML 中已存在，且id和 JS 里写的完全一致（区分大小写） -
width和height属性设的是 canvas 像素尺寸，不是显示尺寸；实际宽高靠 CSS 控制，比如外层加<div style="width: 100%; max-width: 600px;"> - 初始化必须放在
DOMContentLoaded事件里，或把 script 放在</body>底部 - 响应式默认开启，但若父容器没有明确宽度（比如
display: flex下未设flex-basis），图表会塌成一条线
ECharts 初始化失败？先查这三件事
echarts is not defined 是最常遇到的报错，本质不是 ECharts 本身难，而是加载链路上容易断。
本地引入时路径写错、CDN 地址失效、脚本执行顺序不对，都会导致这个错误。别急着调配置，先确认基础链路通不通。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 检查浏览器开发者工具的 Network 标签页，看
echarts.min.js是否返回 200，路径是否拼错（比如echart.min.js少了个s） - CDN 推荐用 jsDelivr 或官方镜像，避免用
latest——https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js这种带版本号的更稳 -
echarts.init()必须传入一个已有且宽高不为 0 的 DOM 元素；<div id="chart"></div>必须显式设style="width: 600px; height: 400px;"，否则图表空白也不报错
Canvas 容器 vs div 容器：选错就白忙
Chart.js 用 <canvas>，ECharts 用 <div>，这不是随意设计，而是底层渲染机制决定的。混用或忽略容器语义，会导致初始化失败或样式错乱。
Canvas 是位图绘制目标，ECharts 默认用 SVG + Canvas 混合渲染，需要一个可计算尺寸的块级容器。
- Chart.js 的
<canvas>不支持百分比宽高属性（width="100%"无效），必须用 CSS 控制显示尺寸，同时保留像素级的width/height属性用于内部坐标系计算 - ECharts 的容器
<div id="main"></div>必须是块级元素，不能是display: inline；如果父级用了display: grid，要确保该 div 有明确的grid-area或最小尺寸约束 - 两者都依赖容器尺寸触发重绘，所以监听
window.resize后，Chart.js 调myChart.resize()，ECharts 调chart.resize()，漏掉就无法响应式
动态加载数据时，update() 和 setOption() 别乱用
从 API 拿到新数据后，不是所有库都用同一个更新逻辑。用错方法会导致图表闪屏、状态丢失，甚至内存泄漏。
Chart.js 的 data 是引用对象，直接改数组再调 update() 即可；ECharts 的 setOption() 默认合并配置，但若传入新数据没带完整结构，旧 tooltip 或 legend 可能消失。
- Chart.js：推荐用
myChart.data.labels = newData.labels+myChart.data.datasets[0].data = newData.values+myChart.update()；避免全量替换myChart.data，否则动画中断 - ECharts：若只更新 series 数据，用
chart.setOption({ series: [{ data: newData }] }, true)，第二个参数true表示不合并，全量替换，防止配置残留干扰 - 两者都不建议在循环里高频调
update()或setOption()；实时数据流建议节流（如requestAnimationFrame或setTimeout(..., 16)）
