正确封装ECharts代码(TypeScript、Vue3、 echarts)

最新推荐文章于 2024-06-14 08:22:18 发布

海澜明月

最新推荐文章于 2024-06-14 08:22:18 发布

阅读量281

点赞数

文章标签： echarts typescript vue.js

本文链接：https://blog.csdn.net/weixin_48077282/article/details/129375583

版权

本文介绍如何在Vue3项目中使用TypeScript封装ECharts组件，通过创建`echarts-types.ts`定义类型，`library.ts`扩展功能，`useECharts.ts`作为主入口函数，实现ECharts的便捷使用。在`src/components/echarts`目录下组织代码，提高代码复用性和可维护性。

摘要由CSDN通过智能技术生成

    |--EChartsComponents
        |--a-echarts.vue      // 组件使用

|–App.vue

library.ts
在 library.ts 中集中引入，挂载 echarts 需要用到的组件和功能
	import * as echarts from 'echarts/core';
 
import {
        BarChart,
        LineChart,
        PieChart,
        MapChart,
        PictorialBarChart,
        RadarChart,
        ScatterChart
} from 'echarts/charts';
 
import {
        TitleComponent,
        TooltipComponent,
        GridComponent,
        PolarComponent,
        AriaComponent,
        ParallelComponent,
        LegendComponent,
        RadarComponent,
        ToolboxComponent,
        DataZoomComponent,
        VisualMapComponent,
        TimelineComponent,
        CalendarComponent,
        GraphicComponent
} from 'echarts/components';
 
ec