vue3全局配置echarts

### 实现 Vue3 中 ECharts 的全局配置 在 Vue3 项目中实现 ECharts 的全局配置，可以通过 `app.config.globalProperties` 将 ECharts 注册为全局属性来完成。以下是具体的方法： #### 方法描述 通过在项目的入口文件（通常是 `main.js` 或者类似的初始化文件）中引入并挂载 ECharts 到 Vue 应用实例的全局属性上，可以使得整个应用中的组件都可以方便地访问到 ECharts[^2]。 ```javascript // main.js 文件 import { createApp } from 'vue'; import App from './App.vue'; import * as echarts from 'echarts'; // 引入 ECharts const app = createApp(App); // 定义全局变量 $echarts app.config.globalProperties.$echarts = echarts; app.mount('#app'); ``` 上述代码实现了将 ECharts 设置为全局可用的对象 `$echarts`，这样任何 Vue 组件都可以通过 `this.$echarts` 来调用 ECharts 功能[^3]。 #### 使用示例 下面是一个简单的 `.vue` 文件中使用 ECharts 的例子： ```html <template> <div ref="chartRef" style="width: 600px; height: 400px;"></div> </template> <script> export default { name: "EChartExample", data() { return { chartInstance: null, }; }, mounted() { this.initChart(); }, beforeUnmount() { if (this.chartInstance) { this.chartInstance.dispose(); // 销毁图表释放资源 } }, methods: { initChart() { const chartDom = this.$refs.chartRef; this.chartInstance = this.$echarts.init(chartDom); // 初始化图表 const option = { title: { text: 'ECharts 示例', }, tooltip: {}, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], }, yAxis: { type: 'value', }, series: [ { data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', }, ], }; this.chartInstance.setOption(option); }, }, }; </script> ``` 此代码片段展示了如何在一个 Vue3 单文件组件中利用之前设置好的全局 `$echarts` 属性创建一个基础柱状图[^1]。 --- ### 注意事项 - 如果需要动态更新图表数据或者样式，可以在响应式对象变化时重新调用 `setOption()` 更新图表。 - 对于大型项目，建议按需加载 ECharts 图表模块以减少打包体积。 ---