ECharts图表需手动管理生命周期以适配Layui Tab切换：显式声明依赖、监听tab激活事件、调用resize/clear/setOption、封装模块或全局引用echarts、桥接legendselectchanged事件联动表格筛选，并确保容器CSS高度有效。
直接集成可行，但“无缝”不是靠堆代码实现的，而是靠容器控制、生命周期对齐和事件桥接——Layui本身不托管ECharts实例，所有图表都得手动管理销毁和重绘。
如何让ECharts图表随Layui Tab切换自动重绘
后台首页常见多Tab布局（如“概览”“销售趋势”“库存预警”），切Tab时图表常白屏或数据错乱。根本原因是ECharts实例未监听Tab激活事件，也未在隐藏时释放资源。
- 必须用
layui.use(['element', 'echarts'], ...)显式声明依赖，不能只引入JS文件 - 每个Tab页的图表容器（如
）需有唯一ID，且首次渲染前确保DOM已挂载（用element.on('tab(demo)', function(data){...})捕获切换） - 切Tab时要手动调用
myChart.resize()，否则响应式失效；若Tab被隐藏后再次显示，需先myChart.clear()再myChart.setOption(...) - 避免在
done回调里直接初始化图表——表格加载完成不等于Tab已激活，应把图表逻辑移到Tab激活回调内
为什么echarts.min.js直接引入后layui.echarts是undefined
Layui默认不内置ECharts模块，所谓 layui.echarts 是开发者自己通过 layui.define 封装的别名，不是Layui原生API。官方从未提供该导出。
ECharts Master
下载
ECharts 图表大师。根据用户数据和业务上下文，自动设计并生成专业的 ECharts 可视化图表。使用场景：(1) 用户提供表格/JSON/CSV 数据需要可视化，(2) 用户说"帮我做个图"、"画个图表"，(3) 需要将查询结果可视化展示。
- 正确做法：在自定义模块中用
layui.define(['jquery'], function(exports){...})手动封装ECharts初始化逻辑，再exports('myChart', ...) - 更稳妥方式：放弃模块化绑定，直接全局引用
echarts变量（CDN引入后自动挂到window.echarts），然后在Layui模块内直接调用 - 若坚持用
layui.use(['echarts'], ...)，必须提前配置模块路径：layui.config({ paths: { 'echarts': './lib/echarts' } })，且对应目录下要有echarts.js（非min版）
多图例联动时点击图例不触发表格筛选的解决方法
ECharts图例点击默认只控制自身系列显隐，要联动Layui表格筛选，必须手动桥接事件。常见错误是直接监听 click 而非 legendselectchanged，导致无法捕获图例状态变更。
- 监听
myChart.on('legendselectchanged', function(params){...})，而非click——后者只在图例文字上触发，前者覆盖整个图例区域 - 从
params.selected获取当前各图例项选中状态，构造筛选条件传给table.reload() - 注意防抖：用户快速点击图例可能触发多次事件，用
layui.util.throttle包裹重载逻辑 - 表格列字段名必须与ECharts数据中的
name字段严格一致，否则筛选无效果（例如图表series中name: '口服药'，表格列field必须是'category'且值为'口服药'）
真正容易被忽略的是图表容器的CSS高度——Layui Tab内容区默认不设高，height: 100% 在Flex布局下会失效，必须给父级（如 .layui-tab-content）加 height: calc(100vh - 120px) 这类固定计算值，否则ECharts初始化时获取的高度为0，后续resize也无效。
