结论：应使用 div 容器 + 可视化库（如 ECharts/Chart.js）+ CSS Grid/Flex 布局，图表交由库渲染至 canvas/svg；禁用 table 或 absolute 手动布局，因其导致响应失效、交互丢失、维护困难。
直接说结论：别用纯 HTML 布局图表，用 div 容器 + 可视化库（如 ECharts/Chart.js）+ CSS Grid/Flex 控制整体结构，图表本身交由库渲染到 或 。
为什么不能用 或嵌套 手动排图表位置表格布局会锁死宽高比、无法响应缩放、拖拽交互失效；手动写 position: absolute 堆叠多个 图表容器，会导致 resize 时重绘错位、z-index 冲突、移动端 touch 事件丢失。真实项目里，一个大屏常含 6–12 个图表，每个都要独立坐标系、动画控制、数据更新节奏——这些全靠 HTML 标签硬排，等于自己造轮子还拒绝维护。常见错误现象：Uncaught TypeError: Cannot read property 'setOption' of null（容器 DOM 没拿到或被重复初始化）、图表在小屏上挤压变形、鼠标 hover tooltip 不跟随、两个折线图共用同一 X 轴但时间刻度错位。
- 所有图表容器必须有唯一
id，且初始化前确保 DOM 已挂载（监听 DOMContentLoaded 或用 document.getElementById 判空重试）
- 避免给图表容器设
width/height 行内样式，改用 CSS 类控制最大宽高（如 .chart-container { width: 100%; height: 400px; }），让库内部按需拉伸 canvas
- 若需等比例缩放（如适配 1920×1080 和 3840×1080 双屏），不要用
transform: scale()，它会模糊文字和描边；应统一用 vw/vh 单位定义容器尺寸，再让 ECharts 的 devicePixelRatio 自动适配高清屏
echarts.init() 容器尺寸不生效的三个关键点
ECharts 初始化后不显示或只显示半截，90% 是容器尺寸问题。它依赖 DOM 元素的 clientWidth/clientHeight 计算画布大小，而这个值在元素未渲染完成时为 0。
使用场景：后台管理系统的左侧菜单折叠后，右侧图表区域宽度突变；Tab 切换后首次加载图表空白；Vue/React 中组件挂载时父容器 display: none。
- 确保调用
echarts.init() 前，容器已插入文档流且可见（getComputedStyle(el).display !== 'none'）
- 监听窗口 resize 后，必须显式调用
myChart.resize()，不能只靠 CSS 媒体查询
- 若容器在 Tab 面板中，默认隐藏（
display: none），首次显示时需加 setTimeout(() => myChart.resize(), 10) 等浏览器重绘周期
- 使用
autoResize: true 配置项仅对 window resize 有效，对自定义 layout 变更无效
多图表联动时，dispatchAction 和 connect 怎么选
当点击地图上的省份，要同步高亮柱状图对应地区、更新右侧详情表——这类联动不是靠 DOM 事件传递数据，而是靠 ECharts 内部的状态通信机制。
性能影响：错误使用 connect 会让所有图表实例互相监听，每次数据更新都广播全量事件，10 个图表时性能下降明显；而 dispatchAction 是精准触发，但需要手动维护图表实例引用。
- 同页面多个图表需共享视觉状态（如高亮、选中）：用
echarts.connect([chart1, chart2, chart3])，但限制在 5 个以内，且避免跨 Tab 连接
- 需条件触发（如“仅当用户点了地图才更新折线图”）：用
chart1.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 2 })，配合 chart2.on('highlight', handler) 接收
- 禁止在
click 回调里反复调用 setOption 全量重绘，改用 setOption({ series: [...] }, { notMerge: false }) 合并更新
- 地图类图表（
geo 或 map 类型）的 selectedMode: 'single' 必须设，否则 dispatchAction 无法定位到具体区域
真正难的不是把图表堆出来，是让它们「呼吸一致」：缩放同步、时间轴对齐、高亮不打架、数据更新不抢锁。这些细节不会报错，但会让用户觉得「卡」「不跟手」「好像没反应」——而它们全藏在容器生命周期、resize 时机、事件委托层级和状态同步策略里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
