vue3+ts+echarts，实现按需引入和类型界定

本人水平实在有限，本文如果有错误的地方欢迎讨论

一直想系统学习一下echarts，无奈今天在引入上就犯了难，现记录一下我的解决方案

为了减少体积和使用的便利，我想实现一个按需和全局的引入

本来是想在main.ts当中直接import * as echarts from 'echarts'，然后把这个echarts挂载在app的实例上，但是以我现有的经验，这可能要涉及到this的问题，vue3已经极力避免this的出现，所以在看了相关大神的文章之后，我决定在App.vue的界面进行引入，然后利用provide函数，将形成的echarts变量传递给其他的子页面，这样就能实现全局使用的问题

1.  
   //App.vue
2.  
   import{provide} from 'vue'
3.  
   import * as echarts from 'echarts'
4.  
   provide("echarts",echarts)
5.  
    
6.  
   //其他子页面中
7.  
   import {inject} from 'vue'
8.  
   let echarts=inject<any>("echarts")

第二个问题是关于按需的问题，这里我直接贴上官方的写法，简单看看就行

1.  
   import * as echarts from 'echarts/core';
2.  
   import {
3.  
   BarChart,
4.  
   // 系列类型的定义后缀都为 SeriesOption
5.  
   BarSeriesOption,
6.  
   LineChart,
7.  
   LineSeriesOption
8.  
   } from 'echarts/charts';
9.  
   import {
10.  
    TitleComponent,
11.  
    // 组件类型的定义后缀都为 ComponentOption
12.  
    TitleComponentOption,
13.  
    TooltipComponent,
14.  
    TooltipComponentOption,
15.  
    GridComponent,
16.  
    GridComponentOption,
17.  
    // 数据集组件
18.  
    DatasetComponent,
19.  
    DatasetComponentOption,
20.  
    // 内置数据转换器组件 (filter, sort)
21.  
    TransformComponent
22.  
    } from 'echarts/components';
23.  
    import { LabelLayout, UniversalTransition } from 'echarts/features';
24.  
    import { CanvasRenderer } from 'echarts/renderers';
25.  
     
26.  
    // 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
27.  
    type ECOption = echarts.ComposeOption<
28.  
    | BarSeriesOption
29.  
    | LineSeriesOption
30.  
    | TitleComponentOption
31.  
    | TooltipComponentOption
32.  
    | GridComponentOption
33.  
    | DatasetComponentOption
34.  
    >;
35.  
     
36.  
    // 注册必须的组件
37.  
    echarts.use([
38.  
    TitleComponent,
39.  
    TooltipComponent,
40.  
    GridComponent,
41.  
    DatasetComponent,
42.  
    TransformComponent,
43.  
    BarChart,
44.  
    LabelLayout,
45.  
    UniversalTransition,
46.  
    CanvasRenderer
47.  
    ]);
48.  
     
49.  
    const option: ECOption = {
50.  
    // ...
51.  
    };

以上很明显引入了一些bar图和line图，并且引入以option为结尾的组件类型，此外还引入了一些title基础组件和对应类型，并利用use的方法将其与核心的echarts对象进行整合，还规制了一个ECOption作为echarts配置对象的类型，这确实实现了按需引入，但是问题是按照我上面的写法，provide不能传递type，所以我需要将类型和echarts分开写到两个文件里。

首先看一下App.vue的文件中我是怎么按需配置echarts的

1.  
   //App.vue文件
2.  
   // 我本来想在这里引入echart
3.  
   import { provide } from 'vue';
4.  
   import * as echarts from 'echarts/core';
5.  
   import {
6.  
   BarChart,
7.  
   // 系列类型的定义后缀都为 SeriesOption
8.  
   LineChart
9.  
   } from 'echarts/charts';
10.  
    import {
11.  
    TitleComponent,
12.  
    // 组件类型的定义后缀都为 ComponentOption
13.  
    TooltipComponent,
14.  
    GridComponent,
15.  
    // 数据集组件
16.  
    DatasetComponent,
17.  
    // 内置数据转换器组件 (filter, sort)
18.  
    TransformComponent
19.  
    } from 'echarts/components';
20.  
    import { LabelLayout, UniversalTransition } from 'echarts/features';
21.  
    import { CanvasRenderer } from 'echarts/renderers';
22.  
     
23.  
    // 注册必须的组件
24.  
    echarts.use([
25.  
    TitleComponent,
26.  
    TooltipComponent,
27.  
    GridComponent,
28.  
    DatasetComponent,
29.  
    TransformComponent,
30.  
    BarChart,
31.  
    LineChart,
32.  
    LabelLayout,
33.  
    UniversalTransition,
34.  
    CanvasRenderer
35.  
    ]);
36.  
     
37.  
    // 把这个配置好的echartprovide出去
38.  
    provide("echarts", echarts)
39.  
    // 把这个option的选项类型也provide出去,但是provide方法无法使用传递类型，那我这边只能放弃

其实就是把全部的类型都摘了出来，然后单独写到一个echart.d.ts的申明文件中去，以下是代码

1.  
   //echart.d.ts
2.  
   // 因为provide不能传递type的原因，我们将echart的option类型单独抽取出来写一个申明文件
3.  
   // 1.我们引入了线图和bar图，所以这里我们引入了两者的类型
4.  
   import { ComposeOption } from 'echarts/core';
5.  
   import {
6.  
   BarSeriesOption,
7.  
   LineSeriesOption
8.  
   } from 'echarts/charts';
9.  
   //2.引入组件，也就是option选项中的类型
10.  
    import {
11.  
    // 组件类型的定义后缀都为 ComponentOption
12.  
    TitleComponentOption,
13.  
    TooltipComponentOption,
14.  
    GridComponentOption,
15.  
    // 数据集组件
16.  
    DatasetComponentOption,
17.  
    } from 'echarts/components';
18.  
     
19.  
    // 3.通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
20.  
    type ECOption = ComposeOption<
21.  
    | BarSeriesOption
22.  
    | LineSeriesOption
23.  
    | TitleComponentOption
24.  
    | TooltipComponentOption
25.  
    | GridComponentOption
26.  
    | DatasetComponentOption
27.  
    >;
28.  
    // 4.将这个类型暴露出去
29.  
    export { ECOption }

然后是具体使用的代码

1.  
    
2.  
   import { inject, onMounted } from 'vue';
3.  
   // 引入我自定义的图像option类型
4.  
   import { ECOption } from '../echart'
5.  
   let echarts = inject<any>("echarts")
6.  
   // 将echart的创建，压缩成一个方程
7.  
   let echartInit = () => {
8.  
   // 将option选项抽离出来
9.  
   let option: ECOption = {
10.  
    title: {
11.  
    text: 'ECharts 入门示例'
12.  
    },
13.  
    tooltip: {},
14.  
    xAxis: {
15.  
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
16.  
    },
17.  
    yAxis: {},
18.  
    series: [
19.  
    {
20.  
    name: '销量',
21.  
    type: 'bar',
22.  
    data: [5, 20, 36, 10, 10, 20]
23.  
    }
24.  
    ]
25.  
    }
26.  
     
27.  
    // echart图标的绘制
28.  
    var myChart = echarts.init(document.getElementById('chart'));
29.  
    myChart.setOption(option);
30.  
    }
31.  
    onMounted(() => {
32.  
    echartInit()
33.  
    })

这篇好文章是转载于：学新通技术网