Echarts 5 动态按需引入图表

官网提供的按需引入方法为全量按需引入，在打包分离中，仍旧存在使用不到的图表被打包进去。

例如：组件A使用了折线图、柱状图，组件B只用到了折线图，但是打包组件B的时候，柱状图也会被打包进去。

本文提供一种动态按需引入的思路，使得只用到折线图的组件B，打包的时候只打包折线图，不会将组件A用到的柱状图也打包进去。

目录结构：

 

Index.ts 如下：

 

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。 import * as ECHARTS from "echarts/core"; import type { ComposeOption } from "echarts/core"; import CORE, { CORE_ECOption } from "./Core"; import { LineChart_ECOption } from "./LineChart"; import { BarChart_ECOption } from "./BarChart"; import { RadarChart_ECOption } from "./RadarChart";  // 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型 export type ECOption = ComposeOption<CORE_ECOption | LineChart_ECOption | BarChart_ECOption | RadarChart_ECOption>;  class Echarts {     public echarts: any;     constructor(type: string[], callback: any) {         // 注册必须的组件         ECHARTS.use([...CORE]);          const charts: any = [];          type!.map((item: any) => {             const res: any = import(/* webpackChunkName: "echarts" */ `./${item}`);             charts.push(res);         });          Promise.all(charts).then((res: any) => {             res.map((item: any) => {                 ECHARTS.use(item.default);             });             callback(ECHARTS);         });     } }  export default Echarts;

 

 

Core.ts 如下：

 

// 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component import {     TitleComponent,     TooltipComponent,     GridComponent,     DatasetComponent,     TransformComponent,     ToolboxComponent,     LegendComponent } from "echarts/components";  // 标签自动布局、全局过渡动画等特性 import { LabelLayout, UniversalTransition } from "echarts/features";  // 组件类型的定义后缀都为 ComponentOption import type {     TitleComponentOption,     TooltipComponentOption,     GridComponentOption,     DatasetComponentOption,     ToolboxComponentOption,     LegendComponentOption } from "echarts/components";  // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步 import { CanvasRenderer } from "echarts/renderers";  // 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型 export type CORE_ECOption =     | TitleComponentOption     | TooltipComponentOption     | GridComponentOption     | DatasetComponentOption     | ToolboxComponentOption     | LegendComponentOption;  const CORE = [     TitleComponent,     TooltipComponent,     GridComponent,     DatasetComponent,     TransformComponent,     ToolboxComponent,     LegendComponent,     LabelLayout,     UniversalTransition,     CanvasRenderer ];  export default CORE;

 

BarChart.ts 如下：

 

import { BarChart } from "echarts/charts";  // 系列类型的定义后缀都为 SeriesOption import type { BarSeriesOption } from "echarts/charts";  export type BarChart_ECOption = BarSeriesOption;  export default BarChart;

 

 

LineChart.ts 如下:

 

import { LineChart } from "echarts/charts";  // 系列类型的定义后缀都为 SeriesOption import type { LineSeriesOption } from "echarts/charts";  // 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型 export type LineChart_ECOption = LineSeriesOption;  export default LineChart;

 

RadarChart.ts 如下:

 

import { RadarChart } from "echarts/charts";  // 系列类型的定义后缀都为 SeriesOption import type { RadarSeriesOption } from "echarts/charts";  // 组件类型的定义后缀都为 ComponentOption import type { RadarComponentOption } from "echarts/components";  // 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型 export type RadarChart_ECOption = RadarComponentOption | RadarSeriesOption;  export default RadarChart;

 

如果项目中还用到其他图表类型，则按照具体需要引入即可。

可以根据具体业务进行调用封装，下面是封装的示例 util.ts:

 

import Echarts from "/echarts/Index";  export const renderEcharts = async (type: string[], dom: string, option: any = {}, callback?: any) => {     if (!dom) return;      new Echarts(type, (echart: any) => {         const _dom: any = document.querySelector(dom);          const echarts_instance = echart.init(_dom);          echarts_instance.setOption(option);          window.addEventListener("resize", function () {             echarts_instance.resize();             echarts_instance.clear();             echarts_instance.setOption(option);         });          _dom?.addEventListener("touchend", () => {             setTimeout(() => {                 echarts_instance.dispatchAction({                     type: "hideTip"                 });                 echarts_instance.dispatchAction({                     type: "updateAxisPointer"                 });             }, 1000);         });          callback && callback(echarts_instance);     }); };

 

 

具体调用：

 

let echarts_instance = null; const options = {// 具体的option } renderEcharts(["LineChart", "BarChart"], "#echarts_box",options, (instance) => {     echarts_instance = instance; });