vue3+ts引入echarts

### 安装必要的依赖 为了在 Vue 3 和 TypeScript 环境中成功引入 ECharts，安装 `echarts` 及其类型定义是必需的操作。这可以通过 npm 来完成： ```bash npm install echarts --save npm install @types/echarts --save-dev ``` 上述命令会分别添加运行时依赖和开发环境下的类型声明文件[^1]。 ### 配置项目结构 考虑到现代前端项目的最佳实践，在创建新组件来封装 ECharts 实例前，建议先规划好项目目录结构。对于大多数场景而言，将图表逻辑隔离在一个独立的组件内是一个不错的选择。 ### 创建ECharts组件 下面展示了一个简单的例子，说明如何构建一个基于 Composition API 的自定义 ECharts 组件。此方法适用于 Vue 3 并利用了 `<script setup>` 语法糖简化模板编写过程: ```vue <!-- src/components/EChartComponent.vue --> <template> <div ref="chartRef" :style="{ width: '600px', height: '400px' }"></div> </template> <script setup lang="ts"> import { onMounted, ref, Ref, watchEffect } from 'vue'; // 导入整个库或仅导入所需模块以减少打包体积 import * as echarts from 'echarts/core'; // 如果只需要柱状图，则可以这样按需加载 // import { // BarChart, // useBarSeries // } from 'echarts/charts' // 引入提示框，标题，直角坐标系组件... import { TitleComponent, TooltipComponent, GridComponent } from 'echarts/components'; // 引入 Canvas 渲染器，注意与 SVG 渲染器互斥 import { CanvasRenderer } from 'echarts/renderers'; // 注册必须的组件 echarts.use([TitleComponent, TooltipComponent, GridComponent, CanvasRenderer]); const props = defineProps<{ option?: echarts.EChartsOption; }>(); const chartRef = ref<HTMLDivElement | null>(null); let myChart: echarts.ECharts; onMounted(() => { if (chartRef.value) { myChart = echarts.init(chartRef.value); const initOptions = () => { if (props.option) { myChart.setOption(props.option); } }; // 初始化配置项 initOptions(); // 监听 prop 中的数据变化并更新图表 watchEffect(initOptions); } }); </script> ``` 这段代码展示了如何初始化 ECharts 图表实例，并通过监听传入属性的变化自动刷新视图中的数据[^2]。 ### 使用组件 最后一步是在页面或其他父级组件里注册并使用刚刚创建好的 ECharts 组件。这里假设已经按照前述方式完成了组件定义工作： ```html <EChartComponent :option="chartData"/> ``` 其中 `chartData` 是符合 ECharts 要求的对象形式的数据源，可以根据实际需求动态设置。