echarts在弹出层中显示不全的根本原因是容器尺寸未正确读取或resize未触发，必须在layer.open()的success回调中用layero.find()获取dom、设置明确宽高、手动调用mychart.resize()并监听window.resize事件。
弹出层里 echarts 显示不全，根本不是图表配置问题，而是容器尺寸没被正确读取或 resize 没触发 —— mychart.resize() 必须手动调，且必须在 dom 就绪后执行。
layer.open() 的 success 回调里初始化图表
很多人把 echarts.init() 写在 layer.open() 外面，或者只靠 setTimeout 硬等，结果拿到的 document.getElementById('chart-id') 是 null 或者宽高为 0。Layui 的弹层是异步插入 DOM 的，必须等它真正挂载完成才能操作。
-
success回调里的layero是 jQuery 包装后的弹层根节点，用layero.find('#chart-id')[0]比document.getElementById更稳 - 容器必须有明确宽高，比如
style="width:100%; height:400px;"；仅写width:100%不够，父容器若没高度，子元素算出来还是 0 - 别在
option里写死width/height，ECharts 不认这个，只认容器 CSS 尺寸
必须监听 window.resize 并手动调用 myChart.resize()
ECharts 初始化时只读一次容器尺寸，弹出层拖拽缩放、浏览器窗口调整、甚至 tab 切换后重新显示，都不会自动重绘。光靠 CSS 百分比撑不开图表内容，myChart.resize() 才是生效关键。
- 在
success里绑定：window.addEventListener('resize', () => myChart.resize()) - 务必在
end或cancel回调里清理：window.removeEventListener('resize', handler)，否则反复打开会堆积监听器 - 如果弹出层支持拖拽（
resize: true），resize 事件照样不会自动触发图表重绘，必须手动桥接
多图例/轮播页里重复 init 导致渲染错乱
弹出层里嵌了 layui.carousel 或 Tab 切换，每页都放一个图表，容易在切换时反复执行 echarts.init()，造成实例残留、内存泄漏、图例错位甚至空白。
ECharts Master
下载
ECharts 图表大师。根据用户数据和业务上下文，自动设计并生成专业的 ECharts 可视化图表。使用场景：(1) 用户提供表格/JSON/CSV 数据需要可视化，(2) 用户说"帮我做个图"、"画个图表"，(3) 需要将查询结果可视化展示。
- 每次切换前先判断是否已有实例：
if (window.myChart) { window.myChart.dispose(); } - 给每个图表容器加唯一 ID，并用变量缓存实例，避免全局污染
- 不要在轮播页的每个
div里都写echarts.init()，改用事件委托 + 条件初始化 - 如果用了
_echarts_instance_属性（旧版兼容写法），记得初始化前清除：chartDom.removeAttribute('_echarts_instance_')
tab 切换后第二页图表只有 100px 高
这是典型 DOM 隐藏状态下尺寸计算失败：第二页 tab 的容器初始 display: none，echarts.init() 读到的高度是 0，回退用默认值（常为 100px）。
- 不能依赖页面加载时一次性初始化，必须在 tab 显示后触发 —— 用
element.on('tab(tab-filter)', function(data){...})监听 - 监听到激活后，先确保容器可见（
$(data.elem).show()或强制重排），再调myChart.resize() - 更稳妥的做法：tab 切换回调里先
myChart.clear()，再setOption()，最后resize()
真正卡住人的从来不是 ECharts API 多难，而是 DOM 何时就绪、尺寸何时有效、监听器何时该删——这些细节不盯紧，图表就永远差那么一截。
