mounted 是初始化第三方图表库最稳妥的时机——此时 dom 已挂载、元素可访问、数据已完成响应式绑定；推荐用 ref 获取容器，需在 beforeunmount/beforedestroy 中销毁实例以防内存泄漏，并注意 ssr 兼容性。

在 Vue Options API 中，mounted 是初始化第三方图表库（如 ECharts、Chart.js）最稳妥的时机——此时 DOM 已真实挂载，元素可访问，数据也已完成响应式绑定。

确保图表容器存在且可获取

推荐使用 ref 而非 ID 选择器，更符合 Vue 的响应式理念，也避免全局污染和重复 ID 风险。

• 模板中添加 ref="chartRef"，例如：<div ref="chartRef" style="width: 600px; height: 400px;"></div>
• mounted 中通过 this.$refs.chartRef 获取 DOM 元素，比 document.getElementById 更可靠
• 若使用 canvas（如 Chart.js），确保 <canvas ref="chartCanvas"></canvas> 已渲染，再传入初始化函数

正确调用图表库初始化方法

不同库写法略有差异，但核心逻辑一致：拿到 DOM 元素 → 创建实例 → 设置配置 → 渲染。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• ECharts：this.myChart = this.$echarts.init(this.$refs.chartRef); this.myChart.setOption(this.option);
• Chart.js：this.chart = new Chart(this.$refs.chartCanvas, { type: 'line', data: this.chartData });
• 注意：若图表数据依赖 props 或 data，确保这些值已在 mounted 前就绪；如有异步加载，可在 nextTick 内执行初始化，确保 DOM 更新完成

记得清理资源防止内存泄漏

图表实例通常持有 DOM 引用和事件监听，组件销毁前必须手动释放。

• 在 beforeUnmount（Vue 3）或 beforeDestroy（Vue 2）中调用销毁方法
• ECharts 示例：this.myChart?.dispose();
• Chart.js 示例：this.chart?.destroy();
• 未清理可能导致重复初始化、图表重叠、控制台警告甚至页面卡顿

处理 SSR 或服务端渲染兼容性

如果项目启用 Nuxt 或 Vue SSR，mounted 在服务端不会执行，但需注意：图表库通常不支持服务端渲染，应确保只在客户端运行。

• 可加判断：if (typeof window !== 'undefined') { /* 初始化逻辑 */ }
• 或使用 onMounted + onBeforeUnmount 组合（Vue 3 Composition API），但在 Options API 中直接判 window 即可
• 避免在 created 或 beforeMount 中尝试访问 this.$refs 或 document，此时 DOM 尚未生成，会报错

大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！