Echarts 5 Dynamic on-demand chart introduction

The on-demand introduction method provided by the official website is full on-demand introduction, and in the packaging separation, there are still unused charts being packaged in.

For example, component A uses line charts and bar charts, and component B only uses line charts, but when you pack component B, bar charts are packed in.

This article provides a dynamic on-demand introduction of the idea, so that only the use of line charts component B, packaged only packaged line charts, will not be used in component A bar charts are also packaged in.

Catalog structure:

 

Below:

 

// Introduce the echarts core module, which provides the interfaces necessary to use 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 to create an Option type with only mandatory components and charts.
export type ECOption = ComposeOption<CORE_ECOption | LineChart_ECOption | BarChart_ECOption | RadarChart_ECOption>;

class Echarts {
	public echarts: any;
	constructor(type: string[], callback: any) {
		// Register the required components
		([...CORE]);

		const charts: any = [];

		type!.map((item: any) => {
			const res: any = import(/* webpackChunkName: "echarts" */ `./${item}`);
			(res);
		});

		(charts).then((res: any) => {
			((item: any) => {
				();
			});
			callback(ECHARTS);
		});
	}
}

export default Echarts;

 

Below:

 

// Introduce headers, alert boxes, Cartesian coordinate systems, datasets, and built-in data converter components, all with a Component suffix.
import {
	TitleComponent,
	TooltipComponent,
	GridComponent,
	DatasetComponent,
	TransformComponent,
	ToolboxComponent,
	LegendComponent
} from "echarts/components";

// Features such as automatic label layout, global transition animations, etc.
import { LabelLayout, UniversalTransition } from "echarts/features";

// Component types are defined with the ComponentOption suffix.
import type {
	TitleComponentOption,
	TooltipComponentOption,
	GridComponentOption,
	DatasetComponentOption,
	ToolboxComponentOption,
	LegendComponentOption
} from "echarts/components";

// Introduce the Canvas renderer, note that introducing the CanvasRenderer or SVGRenderer is a necessary step.
import { CanvasRenderer } from "echarts/renderers";

// ComposeOption to create an Option type with only mandatory components and charts.
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;

 

Below:

 

import { BarChart } from "echarts/charts";

// Series types are defined with the suffix SeriesOption
import type { BarSeriesOption } from "echarts/charts";

export type BarChart_ECOption = BarSeriesOption;

export default BarChart;

 

As follows.

 

import { LineChart } from "echarts/charts";

// Series types are defined with the suffix SeriesOption
import type { LineSeriesOption } from "echarts/charts";

// ComposeOption to create an Option type with only mandatory components and charts.
export type LineChart_ECOption = LineSeriesOption;

export default LineChart;

 

As follows.

 

import { RadarChart } from "echarts/charts";

// Series types are defined with the suffix SeriesOption
import type { RadarSeriesOption } from "echarts/charts";

// Component types are defined with the ComponentOption suffix.
import type { RadarComponentOption } from "echarts/components";

// ComposeOption to create an Option type with only mandatory components and charts.
export type RadarChart_ECOption = RadarComponentOption | RadarSeriesOption;

export default RadarChart;

 

If there are other chart types used in the project, just introduce them as needed.

You can call the encapsulation according to the specific business, the following is an example of encapsulation :

 

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 = (dom);

		const echarts_instance = (_dom);

		echarts_instance.setOption(option);

		("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);
	});
};

 

Specific calls:

 

let echarts_instance = null;
const options = {// specific option }
renderEcharts(["LineChart", "BarChart"], "#short_sale_count",options, (instance) => {
	echarts_instance = instance;
});