把这页想成"把数字画成图"：一堆干巴巴的数字，ECharts 能把它变成好看的柱状图 / 折线图 / 饼图。你不用自己画坐标、画柱子，只要把数据填进一个叫 option 的配置对象里，剩下的它全包了。固定流程五步：引 CDN → 给容器 → echarts.init → 写 option → setOption。
上面三张图用的是同一份数据，只是把配置里 series.type 从 "bar" 改成 "line"、"pie"，图就变了。这就是 ECharts 的核心思想——配置项驱动，图长什么样全看你 option 怎么写。点"随机换数据"感受一下"改数据后重新 setOption"。
1. 引入 < script src = "https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js" > < /script> → 第一步：把 ECharts 库引进来
// ★ 必须是完整 URL；放最前面，否则后面会报 echarts is not defined → 引晚了，后面用 echarts 时它还不存在
2. 容器 < div id = "chart"
style = "width:100%; height:400px;" > < /div> → 第二步：给一个空 div 当图的窝
// ★ 容器必须【既有宽又有高】，否则图表渲染成一片空白 → 没高度，图就画不出来
3. 初始化 → 第三步：在这个窝上初始化
let chart = echarts.init(document.getElementById("chart")); // 把图画进这个容器
// 每个容器只 init 一次；重复 init 会告警还白占内存 → 别反复 init
4. 渲染 chart.setOption({ ... }); // 把配置项传进去，图立刻出来 → 第四步：把数据和样式塞进去，图就出来
两个入门最高频的报错：① 容器没写 height → 图表一片空白；② CDN 没加载成功 → 控制台报 echarts is not defined。排查顺序永远是：先看 Network 里 echarts.js 是不是 200 加载成功，再看容器是不是有明确高度。
| 配置 | 作用 | 示例 |
|---|---|---|
| title | 图表标题 | { text: "标题", left: "center" } // 图最顶上的标题，居中 |
| tooltip | 鼠标悬停提示 | tooltip: { trigger: "axis" } // 鼠标放上去时弹提示框 |
| legend | 图例（有多条系列时必须有） | legend: { data: ["A", "B"] } // 图例：说明每种颜色代表哪条线 |
| xAxis / yAxis | 坐标轴：类目轴 / 数值轴 | { type: "category" } // X 轴：类目轴（放部门名这种文字）
/ { type: "value" } // Y 轴：数值轴（放销售额这种数字） |
| series | 图形本体：type + data | { type: "bar", data: [...] } // 图的本体：画什么形状 + 用哪些数 |
| color | 配色数组 | color: ["#5470c6", "#ee6666"] // 图用哪几种颜色 |
不用全背，常用就这几个：series 是图的"本体"（决定画什么、数据是啥），xAxis/yAxis 是坐标轴，tooltip/legend 是交互辅助。先跑通最小的 bar 图，再一个个往上加。
// 柱状图、折线图：data 就是纯数字数组 → 柱和线的数据就是一串数
{ type: "bar", data: [82, 120, 96] } // 柱状图：比大小 → 画成一根根柱子比高低
{ type: "line", data: [82, 120, 96] } // 折线图：看趋势 → 画成连线看升降
// 饼图：data 必须是 { name, value } 对象数组！→ 饼图格式不一样，每块要带个名字
{
type: "pie", // 画成饼图
data: [ // 注意：不是纯数字，是 {名字, 数值} 一对一对
{ name: "技术部", value: 82 }, // 每一块：叫啥名、占多少
{ name: "市场部", value: 120 }
]
}
唯一要记的坑：饼图的 data 格式和柱/线不一样。柱/线是纯数字数组，饼图必须是 { name, value } 对象数组（因为饼图要显示每块叫啥名）。切饼图时还要把 xAxis/yAxis 注释掉，否则显示会异常。
// 动态更新：改完数据重新 setOption，它只重画变化的部分 → 数据变了就重画一遍
setInterval(function () { // 每 2 秒自动跑一次
option.series[0].data = [Math.random * 100, ...]; // 换一批随机新数据
chart.setOption(option); // ★ 同一个实例反复 setOption 即可 → 还是那张图，刷新数据
}, 2000);
// 自适应：窗口大小变了，图要跟着缩放 → 浏览器窗口拉大拉小，图也得跟着变
window.addEventListener("resize", function () {
chart.resize(); // 让图重新适配大小
});
// 销毁：离开页面时释放内存 → 不用了就把图销毁，别白占内存
chart.dispose();
做实时数据看板（比如每秒刷新的监控图）就靠 setInterval + 重新 setOption。另外窗口拉宽拉窄时，记得监听 resize 调一下 chart.resize，否则图不会跟着变。
① 可能在什么地方用：后台数据看板（销售额柱状图）、运营报表（趋势折线图）、占比分析（饼图）、大屏可视化——凡是"把数据变成图给领导看"的场景都是 ECharts。
② 常见的问题：图一片空白（容器没 height）；报 echarts is not defined（CDN 没加载成功或放错位置）；饼图画不出来（data 没用 {name,value} 对象数组）；窗口缩放后图变形（忘了监听 resize）；重复 echarts.init 导致告警。
③ 解决思路：空白就先给容器写死一个 height:400px 测试；报错就看 Network 里 echarts.js 加载成功没；饼图不对就检查 data 格式；变形就加 chart.resize。记住最小四步：引 CDN → 给容器宽高 → echarts.init → setOption。