ECharts在index.html中集成只需三步：引入库、准备带宽高的DOM容器、初始化并设配置；推荐本地引入echarts.min.js或使用指定版本CDN；需确保DOM加载完成后再init，监听resize调用resize()实现响应式。
直接在 index.html 里集成 ECharts 展示图表，核心就三件事：引入库、准备容器、初始化并设配置。没额外构建步骤，纯静态 HTML 就能跑起来。
引入 echarts.min.js 的两种可靠方式
本地引入最稳，适合离线或内网环境；CDN 引入省事，但依赖外部网络和版本可用性。
- 本地方式：下载
echarts.min.js（推荐从 jsDelivr CDN 右键另存），放进项目js/目录，然后在<head>或<body>底部加：<script src="js/echarts.min.js"></script>
- CDN 方式（开发调试快）：
<script src="https://www.php.cn/link/a171a609ed56e7abed4ce4672c16507f"></script>
注意别用latest，避免线上版本突变导致图表异常 - 错误现象：
echarts is not defined—— 大概率是脚本没加载成功，检查浏览器控制台 Network 标签页里echarts.min.js是否 200，路径是否拼错（比如写成echart.min.js少了个s）
DOM 容器必须显式声明宽高
ECharts 不会自动撑开父容器，div 没宽高 = 图表不渲染，连空白都不显示。
- 正确写法（带单位）：
<div id="main" style="width: 600px; height: 400px;"></div>
或用 class + CSS 控制，但最终计算后必须有确定像素值 - 常见坑：
height: 100%却没给父级设高；display: flex容器里子元素未设flex: 1；用rem适配时根字体大小为 0 导致高度塌陷 - 调试技巧：右键容器 → “检查”，看 computed 样式里
height和width是否为具体数值（如400px），不是auto或0px
初始化顺序和 setOption 的调用时机
echarts.init() 必须等 DOM 加载完成，且目标容器已存在；setOption() 可以立刻调用，但数据为空时图表会空白。
立即学习“前端免费学习笔记（深入）”；
- 安全写法（放
<body>底部）：var myChart = echarts.init(document.getElementById('main'));<br>myChart.setOption({ /* 配置对象 */ }); - 如果脚本在
<head>，必须包一层：document.addEventListener('DOMContentLoaded', function() {<br> var myChart = echarts.init(document.getElementById('main'));<br> myChart.setOption({ ... });<br>}); - 容易忽略的点：多次调用
init()同一个 DOM 节点会报错Initialize failed: invalid dom；解决方法是先判空：if (document.getElementById('main')) { ... }
响应式适配：图表随窗口缩放重绘
单纯 CSS 媒体查询不能触发 ECharts 重绘，必须监听 resize 并手动调用 resize()。
- 基础适配代码：
window.addEventListener('resize', function() {<br> myChart.resize();<br>}); - 防抖更稳妥（避免频繁触发）：
var resizeTimer;<br>window.addEventListener('resize', function() {<br> clearTimeout(resizeTimer);<br> resizeTimer = setTimeout(function() { myChart.resize(); }, 200);<br>}); - 注意：如果容器本身用
vw/vh或flex动态变化，resize事件仍会触发，但需确保myChart实例变量在作用域内可访问
真正卡住人的往往不是配置项写法，而是容器不可见、脚本执行过早、或 resize 没绑定——这些地方一错，图表就静默失败，连报错都没有。
