vue 3 中集成 echarts 需确保 dom 就绪再初始化、封装为 useecharts 组合式函数、按需引入或 renderjs 加载、主动处理空数据与异常。
在 Vue 3 的 setup 中集成 ECharts 这类需操作真实 DOM 的第三方库，核心不是“能不能用”，而是“怎么让响应式、生命周期、DOM 就绪、尺寸变化、销毁清理全部对齐”。直接 echarts.init() 放 onMounted 会踩坑——比如 Dialog 里 DOM 没挂载、resize 失效、空数据无提示、打包体积大。下面分四块讲清楚关键动作。
确保 DOM 就绪再初始化
不能只靠 onMounted。它只保证组件挂载，不保证容器元素已渲染到页面（尤其在 <el-dialog></el-dialog>、<teleport></teleport> 或条件渲染场景下）。必须等 ref 真正指向有效 DOM 节点后再 init。
- 用
nextTick包一层：确保模板渲染完成 - 加空值防护：
if (!container.value) return - 复杂场景（如弹窗）可结合
setTimeout(() => {}, 0)或监听visibilitychange事件
封装成可复用的组合式函数（Composable）
把初始化、更新、销毁、resize 监听抽成 useEcharts，比每个组件里重复写逻辑更可控：
ECharts Master
下载
ECharts 图表大师。根据用户数据和业务上下文，自动设计并生成专业的 ECharts 可视化图表。使用场景：(1) 用户提供表格/JSON/CSV 数据需要可视化，(2) 用户说"帮我做个图"、"画个图表"，(3) 需要将查询结果可视化展示。
- 接收
ref容器、options响应式对象、可选theme - 内部调用
echarts.init并缓存实例，避免多次初始化 - 用
watch监听options变化，自动调用setOption（带notMerge: true避免配置残留） - 自动绑定
resize事件，并在onBeforeUnmount清理
按需引入 + renderjs（跨平台必备）
全量 import * as echarts from 'echarts' 会让包体积暴涨（+700KB），且在 uni-app 小程序或 App 端直接报错（document is not defined）。
- Vue 3 项目中：用官方按需引入方式，只注册当前需要的图表和组件（如
BarChart,TooltipComponent,CanvasRenderer） - uni-app 多端项目：必须用
renderjs模块加载 ECharts（逻辑层不能 import），否则 H5 正常、小程序白屏 - 容器宽高必须显式设置（rpx 或 px），父元素不能是
display: flex但没设height
主动处理空数据与异常状态
ECharts 不会自动提示“暂无数据”，只会画出坐标轴和网格线，显得突兀。需手动干预：
- 在
setOption前判断options.series?.[0]?.data是否为空/无效 - 空时用
graphic配置插入自定义文本层（比覆盖 DOM 更稳定） - 捕获
chart.on('error', handler)处理渲染失败（如 canvas 初始化异常） - 配合
loading状态，用chart.showLoading()/hideLoading()
