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);
});
}
}
exportdefault 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
];
exportdefault CORE;
BarChart.ts 如下：
import { BarChart } from "echarts/charts";//系列类型的定义后缀都为 SeriesOption
import type { BarSeriesOption } from "echarts/charts";
export type BarChart_ECOption=BarSeriesOption;
exportdefault BarChart;LineChart.ts 如下:
import { LineChart } from "echarts/charts";//系列类型的定义后缀都为 SeriesOption
import type { LineSeriesOption } from "echarts/charts";//通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
export type LineChart_ECOption =LineSeriesOption;
exportdefault 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;
exportdefault 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;
});