layui表格自适应需设width: 'auto'和每列minWidth，容器宽100%且禁用fixed；ECharts resize须用addEventListener批量调用并校验DOM存在；共用容器时用flex布局分离高度，移动端需监听orientationchange并用getBoundingClientRect获取真实尺寸。
layui表格的宽度自适应靠width: 'auto'和minWidth
layui table.render() 默认不响应窗口缩放，必须手动干预。关键不是监听window.resize后重绘整个表格（开销大、闪屏），而是让表格容器本身撑满父级，并控制列宽策略：
-
width: 'auto'是核心配置项，必须显式传入，否则表格固定为640px； - 每列需设
minWidth（如120），避免窄屏下文字挤成一团或列被压缩消失； - 容器元素（如
<div id="table-container">）要设width: 100%且无浮动/绝对定位干扰； - 禁用
fixed: true（冻结列）会破坏自适应逻辑，除非你同时重写table.resize()内部计算。
ECharts图表resize不能只绑window.onresize = myChart.resize
一个页面多个图表时，直接赋值window.onresize会被覆盖，只剩最后一个生效。必须用事件监听并批量触发：
- 在每个
echarts.init()之后，**立刻**调用myChart.setOption(option, true)，第二个参数true启用“不合并新旧option”的强制刷新模式，否则resize后样式可能残留旧配置； - 统一注册一次
window.addEventListener('resize', () => { myChart1.resize(); myChart2.resize(); })，不要用onresize =赋值； - 如果图表在tab页或折叠面板里，resize前先判断
myChart.getDom().offsetParent !== null，否则resize()会报错或无效； - 避免在
done回调里反复调用init()——这会产生内存泄漏，应复用myChart实例。
表格与图表共用同一容器时，高度冲突怎么解
常见错误是给<div id="main">同时塞layui-table和echarts，结果图表高度被table撑变形。根本解法是分离容器流：
ECharts Master
下载
ECharts 图表大师。根据用户数据和业务上下文，自动设计并生成专业的 ECharts 可视化图表。使用场景：(1) 用户提供表格/JSON/CSV 数据需要可视化，(2) 用户说"帮我做个图"、"画个图表"，(3) 需要将查询结果可视化展示。
- 用
display: flex; flex-direction: column;包裹两个子容器，再分别设flex: 1让它们均分剩余高度； - 表格容器加
overflow: auto，图表容器加min-height: 300px（防过窄）； - 禁用
layui-table的height配置项——它会强制固定高度，破坏flex布局； - 若用
layui.layer.open()弹出图表，layer默认不监听resize，得手动在success回调里绑定resize事件并调用myChart.resize()。
移动端横竖屏切换时，layui + ECharts容易漏掉的点
PC端resize逻辑在手机上不完全适用。Safari/iOS WebView对resize事件触发不敏感，尤其键盘弹起收起时：
- 除了
resize，还要监听orientationchange事件（iOS Safari支持）； - 安卓部分WebView需监听
input事件（如搜索框聚焦）后延迟300ms再resize()，因为键盘会改变window.innerHeight； - 图表容器的
height别写死500px，改用vh单位（如height: 40vh），但注意vh在iOS Safari中键盘弹出会失真，此时得用container.clientHeight动态算； - 表格列
templet里如果有img或canvas，记得加max-width: 100%和height: auto，否则缩放后图片溢出。
window.innerHeight、document.documentElement.clientHeight、container.offsetHeight三者数值来回跳变。建议所有尺寸读取统一走container.getBoundingClientRect().height，它最贴近渲染后的真实像素值。 
