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

最新推荐文章于 2025-10-18 06:10:38 发布

原创最新推荐文章于 2025-10-18 06:10:38 发布 · 6.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #typescript #vue #前端

前端综合专栏收录该内容

40 篇文章

订阅专栏

本文讲述了作者在Vue 3应用中如何解决ECharts的按需引入和全局配置问题，包括提供注入机制、按需加载图表和组件，以及如何处理类型声明。

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

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

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

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

//App.vue
import{provide} from 'vue'
import * as echarts from 'echarts'
provide("echarts",echarts)

//其他子页面中
import {inject} from 'vue'
let echarts=inject<any>("echarts")

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

import * as echarts from 'echarts/core';
import {
  BarChart,
  // 系列类型的定义后缀都为 SeriesOption
  BarSeriesOption,
  LineChart,
  LineSeriesOption
} from 'echarts/charts';
import {
  TitleComponent,
  // 组件类型的定义后缀都为 ComponentOption
  TitleComponentOption,
  TooltipComponent,
  TooltipComponentOption,
  GridComponent,
  GridComponentOption,
  // 数据集组件
  DatasetComponent,
  DatasetComponentOption,
  // 内置数据转换器组件 (filter, sort)
  TransformComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = echarts.ComposeOption<
  | BarSeriesOption
  | LineSeriesOption
  | TitleComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | DatasetComponentOption
>;

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

const option: ECOption = {
  // ...
};

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

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

//App.vue文件
// 我本来想在这里引入echart
import { provide } from 'vue';
import * as echarts from 'echarts/core';
import {
  BarChart,
  // 系列类型的定义后缀都为 SeriesOption
  LineChart
} from 'echarts/charts';
import {
  TitleComponent,
  // 组件类型的定义后缀都为 ComponentOption
  TooltipComponent,
  GridComponent,
  // 数据集组件
  DatasetComponent,
  // 内置数据转换器组件 (filter, sort)
  TransformComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

// 把这个配置好的echartprovide出去
provide("echarts", echarts)
// 把这个option的选项类型也provide出去,但是provide方法无法使用传递类型，那我这边只能放弃

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

//echart.d.ts
// 因为provide不能传递type的原因，我们将echart的option类型单独抽取出来写一个申明文件
// 1.我们引入了线图和bar图，所以这里我们引入了两者的类型
import { ComposeOption } from 'echarts/core';
import {
    BarSeriesOption,
    LineSeriesOption
} from 'echarts/charts';
//2.引入组件，也就是option选项中的类型
import {
    // 组件类型的定义后缀都为 ComponentOption
    TitleComponentOption,
    TooltipComponentOption,
    GridComponentOption,
    // 数据集组件
    DatasetComponentOption,
} from 'echarts/components';

// 3.通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = ComposeOption<
    | BarSeriesOption
    | LineSeriesOption
    | TitleComponentOption
    | TooltipComponentOption
    | GridComponentOption
    | DatasetComponentOption
>;
// 4.将这个类型暴露出去
export { ECOption }

然后是具体使用的代码


import { inject, onMounted } from 'vue';
// 引入我自定义的图像option类型
import { ECOption } from '../echart'
let echarts = inject<any>("echarts")
// 将echart的创建，压缩成一个方程
let echartInit = () => {
    // 将option选项抽离出来
    let option: ECOption = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }
        ]
    }

    // echart图标的绘制
    var myChart = echarts.init(document.getElementById('chart'));
    myChart.setOption(option);
}
onMounted(() => {
    echartInit()
})

以上就是我的解决方案，非科班出身，术语上可能有错误，欢迎讨论建议