图表容器必须用 vw/vh 单位，避免百分比累积误差和 px 固定尺寸适配问题；echarts 初始化前需确保容器渲染且尺寸非零；联动应通过全局状态管理而非 dom 查询；resize 需节流并校验容器可见性；缩放优先使用 transform: scale() 而非 rem。
图表容器必须用 vw/vh，不能用百分比或固定 px
百分比宽度在多层嵌套（比如 .screen > .grid > .panel > .chart）下会逐层累积计算误差，最终导致图表宽度超 100vw，出现横向滚动条；固定 px（如 width: 600px）则在 4K 大屏上缩成小方块，联动时坐标错位。vw/vh 直接锚定视口，是唯一能保证所有图表尺寸同步缩放的单位。
实操建议：
-
.chart-container必须设width: 30vw; height: 40vh，不要写width: 100% - 避免给父级加
padding或margin，否则子容器100vw会溢出；改用box-sizing: border-box+ 内部padding - 如果用 ECharts，初始化前确保容器已渲染且尺寸非 0——常见报错
Cannot initialize ECharts instance before container is ready就是这个原因
联动事件必须用统一状态管理，别靠 DOM 查询
多个图表之间点击/悬停联动，如果每个图表都用 document.querySelector 去找另一个图表的 DOM 节点，不仅性能差，还会在动态加载、异步渲染场景下查不到元素。真实项目里，图表常由不同模块异步挂载，DOM 顺序不可靠。
实操建议：
- 用一个轻量对象（如
window.chartState = { selectedCity: '北京', timeRange: '24h' }）做全局状态桥 - 每个图表监听该对象变化，用
Object.defineProperty或Proxy实现简单响应式，避免引入 Vue/React - 点击地图区域后，只更新
chartState.selectedCity，其他图表订阅该字段自动重绘，不直接操作对方 DOM
ECharts resize 必须节流 + 检查容器可见性
大屏常有全屏切换、Tab 切换、折叠面板等操作，resize 事件会高频触发，但 ECharts 的 resize() 是重绘操作，频繁调用会导致卡顿甚至内存泄漏。更隐蔽的问题是：被隐藏的 Tab 里的图表也会收到 resize，但此时容器 offsetWidth === 0，强行 resize 会清空画布。
实操建议：
- 用
requestAnimationFrame节流 resize，每帧最多执行一次：let pending = false; window.addEventListener('resize', () => { if (!pending) { pending = true; requestAnimationFrame(() => { chart.resize(); pending = false; }); } }); - 调用
resize()前加判断：if (chart.container.offsetParent && chart.container.offsetWidth > 0) chart.resize() - 对 Tab 切换场景，监听
visibilitychange，隐藏时暂停数据拉取，显示时再 resume 并手动 resize
缩放适配优先用 transform: scale()，别依赖 rem
rem 方案靠 JS 动态设置 document.documentElement.style.fontSize，但在 1920px → 3840px 跨度下，小数精度误差会逐层放大：字体、边框、间距全部错位，联动时两个图表的高亮区域对不齐。transform 是纯几何变换，无计算误差，且浏览器优化成熟。
实操建议：
- 整个大屏包裹一层
<div id="scale-wrapper" style="transform-origin: 0 0;"></div> - JS 根据设计稿宽高比（如 16:9）计算缩放比：
const scale = Math.min(window.innerWidth / 1920, window.innerHeight / 1080); - 每次 resize 后只更新：
scaleWrapper.style.transform = `scale(${scale})` - canvas 图表需同步处理：
canvas.width = canvas.offsetWidth * window.devicePixelRatio，再设canvas.style.width = "100%"
复杂点在于缩放和联动同时发生时，鼠标事件坐标要反向映射回原始尺寸——这个转换容易被忽略，但一旦漏掉，点击地图选中区域就总偏移几像素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
