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;

});

打赏赞(5)

一	二	三	四	五	六	日
« 7月
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

评论 取消回复

评论取消回复