纯HTML文件需引入Chart.js等库并用JS初始化图表实例，否则canvas或div仅为静态容器；Chart.js必须用canvas并调.getContext('2d')，ECharts需div且设显式宽高，均须确保DOM就绪后执行。
纯 HTML 文件无法直接“接入”图表库——你得把 JavaScript 库加载进来，再用 JS 初始化图表实例，否则 <canvas></canvas> 或 <div> 就只是个空盒子。
<h3>Chart.js 必须用 <code><canvas></canvas> 且要先获取上下文
Chart.js 基于 HTML5 Canvas 渲染，不支持直接往 <div> 里塞配置。常见错误是：写了 <code><div id="chart"></div> 却没改标签，或漏掉 .getContext('2d')。
- HTML 中必须用
<canvas id="myChart"></canvas>，并显式设width和height（CSS 缩放会导致模糊） - JS 中必须先调
document.getElementById('myChart')，再链式调.getContext('2d')，否则new Chart(...)会报"Canvas is not valid" - 如果页面是动态加载的（比如 SPA），确保 DOM 已就绪——别在
<script></script>标签里直接执行，改用document.addEventListener('DOMContentLoaded', ...)
ECharts 要用 <div> 容器且必须初始化尺寸
<p>ECharts 渲染到普通 <code><div>，但它依赖容器有明确宽高，否则初始化后是空白，控制台也不报错，极难排查。
<ul>
<li>HTML 中写 <code><div id="main" style="width: 600px; height: 400px;"></div> —— 不能只靠 CSS 类，内联样式最稳
echarts.init(document.getElementById('main'))，否则返回 null
resize 并调 chart.resize()，否则图表错位或留白CDN 引入顺序和跨域问题常被忽略
库文件加载失败时，浏览器控制台通常只显示 "Chart is not defined" 这类泛错误，实际可能是网络或顺序问题。
立即学习“前端免费学习笔记（深入）”；
-
<script></script>标签必须放在底部，或加defer属性；放在里又没defer，容易因 DOM 未就绪而初始化失败 - 国内访问
cdn.jsdelivr.net有时不稳定，可换为https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js等备用源 - 若本地开发用
file://协议打开 HTML，部分 CDN 会因 CORS 拒绝加载——此时应改用本地 script 文件或起一个简易 HTTP 服务（如npx http-server）
数据更新不能直接改 data 对象
很多人 fetch 到新数据后直接赋值给 myChart.data.labels = [...]，结果图表不刷新——因为 Chart.js 不监听对象变更。
- 正确做法是调
myChart.data.labels = newLabels+myChart.data.datasets[0].data = newData+myChart.update() - ECharts 同理：必须用
chart.setOption(newOption, { notMerge: true })或chart.setOption({ series: [...] }, { replaceMerge: ['series'] })，不能只改option.series[0].data - 高频更新（如每秒一次）时，避免反复
update()，可先节流，或用chart.addData()（Chart.js） /chart.appendData()（ECharts）提升性能
最容易卡住的地方不是语法，而是 DOM 节点是否真实存在、尺寸是否已计算、脚本是否在正确时机执行——这三个条件缺一不可，少一个，图表就静默失败。
