大屏图表等比缩放必须用 rem + js 动态设置 html font-size，禁用 transform: scale()；以 1920×1080 为基准设 1rem=80px，js 计算缩放因子并更新根字号，配合 grid 弹性布局、clamp 字体、echarts 关闭响应式及 gpu 加速优化。
大屏图表等比缩放必须用 rem + JS 动态 font-size，别碰 transform: scale()
直接对 body 或图表容器加 transform: scale() 看似快，但会错位 fixed 元素、热区偏移、截图/打印尺寸失真，且 ECharts/Chart.js 的 tooltip、坐标轴文字、图例点击区域全部失效。真正上线可用的方案是把缩放逻辑交给根字号——html 的 font-size 变了，所有用 rem 写的宽高、字号、边距自动同比例变化，图表库内部渲染也同步响应。
实操要点：
- 以 1920×1080 设计稿为基准，约定
1rem = 80px（即 1920 ÷ 24），那么整个看板所有尺寸都用rem：图表容器width: 24rem、标题font-size: 1.5rem、间距margin: 0.5rem - JS 监听
resize和DOMContentLoaded，计算缩放因子：Math.min(window.innerWidth / 1920, window.innerHeight / 1080)，再乘以 80 赋给document.documentElement.style.fontSize - 务必加
overflow: hidden在html和body上，否则缩放后右侧或底部可能意外溢出滚动条 - 图表库初始化前确保缩放已生效，ECharts 推荐在
setOption前调用resize()，避免初始渲染比例错误
Grid 布局里图表容器不能写死像素，得用 fr + minmax() + clamp()
如果图表容器宽高写成 width: 800px; height: 400px，rem 缩放后它仍按原始像素占位，和周围元素比例脱节。Grid 必须用弹性单位驱动布局骨架。
正确写法：
- 根容器设
display: grid; height: 100vh; width: 100vw; -
grid-template-rows: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);—— 避免用2fr硬分，minmax(0, 2fr)允许内容收缩不溢出 - 图表区域用
grid-area: chart-main;，并在父级用grid-template-areas可视化排布，比如"header header" "chart-main chart-main" "footer footer" - 字体大小统一用
font-size: clamp(14px, 4vw, 28px);，既保最小可读性，又防超大屏文字撑爆容器
ECharts 图表自身要关掉自适应，交由外层 rem 控制
ECharts 默认开启 resize 监听，但大屏缩放是全局的，它自己再 resize 会和 rem 缩放叠加，导致抖动或比例错乱。必须显式关闭内部响应，让尺寸完全由 CSS 控制。
关键配置：
- 初始化时设
responsive: false和maintainAspectRatio: false - 容器宽高必须用
rem（如width: 24rem; height: 12rem;），别用%或vw/vh，否则和 rem 缩放冲突 - 调用
myChart.setOption(option)后，**不要**立即myChart.resize()；只在窗口缩放完成、html.font-size更新后再调一次 - 坐标轴标签字号也得用
rem：在axisLabel: { fontSize: '1.2rem' }，否则文字大小不随整体缩放
Safari 和微信 WebView 上图表模糊？加 translateZ(0) 不够，得全覆盖
Windows Chrome 和 iOS 微信 X5 内核下，ECharts canvas 渲染模糊、边框锯齿，不是分辨率问题，是 GPU 加速没真正触发。只给容器加 transform: translateZ(0) 没用，canvas 本身和内部文本需要独立加速。
必须这么做：
- 图表容器（
.chart-wrapper）加transform: translateZ(0); will-change: transform; - ECharts 实例的 DOM 容器（即
div#chart）也加相同样式 - 若用自定义 HTML 标签做 tooltip，其内部文字也要加
transform: translateZ(0) - 避免在图表容器上设
filter: blur()或半透明背景，这些会禁用硬件加速
最易被忽略的是：缩放因子计算必须包含 devicePixelRatio，否则高 DPI 屏（如 MacBook Retina、安卓旗舰机）下图表仍发虚。实际缩放值应为 scale * window.devicePixelRatio，再反向调整 font-size 补偿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
