《Vue3笔记》第32节：Vue3项目基于ECharts封装图表组件

### Vue3 和 Echarts 整合使用教程 #### 导入并安装依赖库 为了在 Vue3 中集成 ECharts，需先确保已安装 `echarts` 库以及适用于 Vue3 的官方封装包 `vue-echarts`。可以通过 npm 或 yarn 安装这些必要的软件包。 ```bash npm install echarts vue-echarts --save ``` 或者 ```bash yarn add echarts vue-echarts ``` #### 创建图表组件 创建一个新的 Vue 组件用于展示 ECharts 图表，在该组件内部引入所需模块，并定义好初始化配置项[^1]。 ```javascript // src/components/MyEchart.vue <template> <v-chart class="my-echart" :option="option"/> </template> <script setup> import { ref, onMounted } from &#39;vue&#39;; import VChart from &#39;vue-echarts&#39;; // 引入 ECharts 主模块 import * as echarts from &#39;echarts/core&#39;; const option = ref({ title: { text: &#39;示例折线图&#39; }, tooltip: {}, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ type: &#39;line&#39;, data: [5, 20, 36, 10, 10, 20] }] }); </script> <style scoped> .my-echart { height: 400px; } </style> ``` #### 注册路由与页面布局调整 为了让新建立的图表组件能够被访问到，需要将其注册至路由配置文件中，以便于通过 URL 地址直接跳转查看效果[^3]。 ```javascript // src/router/index.js import MyEchart from &#39;../components/MyEchart&#39; { path: &#39;/myEchart&#39;, name: &#39;MyEchart&#39;, component: MyEchart, }, ``` 上述过程展示了如何在一个基于 Vue3 构建的应用程序里快速搭建起支持动态交互功能的数据可视化界面。这不仅限于简单的折线图案例，还可以根据实际需求定制更多类型的图形报表来满足业务逻辑上的展现要求[^2]。