Echarts 5 动态按需引入图表

岭北黑山雕

官网提供的按需引入方法为全量按需引入，在打包分离中，仍旧存在使用不到的图表被打包进去。
例如：组件A使用了折线图、柱状图，组件B只用到了折线图，但是打包组件B的时候，柱状图也会被打包进去。
本文提供一种动态按需引入的思路，使得只用到折线图的组件B，打包的时候只打包折线图，不会将组件A用到的柱状图也打包进去。
目录结构：

 
Index.ts 如下：
 

1. // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
2. import * as ECHARTS from "echarts/core";
3. import type { ComposeOption } from "echarts/core";
4. import CORE, { CORE_ECOption } from "./Core";
5. import { LineChart_ECOption } from "./LineChart";
6. import { BarChart_ECOption } from "./BarChart";
7. import { RadarChart_ECOption } from "./RadarChart";
9. // 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
10. export type ECOption = ComposeOption<CORE_ECOption | LineChart_ECOption | BarChart_ECOption | RadarChart_ECOption>;
12. class Echarts {
13.     public echarts: any;
14.     constructor(type: string[], callback: any) {
15.         // 注册必须的组件
16.         ECHARTS.use([...CORE]);
18.         const charts: any = [];
20.         type!.map((item: any) => {
21.             const res: any = import(/* webpackChunkName: "echarts" */ `./${item}`);
22.             charts.push(res);
23.         });
25.         Promise.all(charts).then((res: any) => {
26.             res.map((item: any) => {
27.                 ECHARTS.use(item.default);
28.             });
29.             callback(ECHARTS);
30.         });
31.     }
32. }
34. export default Echarts;

复制代码

 
 
Core.ts 如下：
 

1. // 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
2. import {
3.     TitleComponent,
4.     TooltipComponent,
5.     GridComponent,
6.     DatasetComponent,
7.     TransformComponent,
8.     ToolboxComponent,
9.     LegendComponent
10. } from "echarts/components";
12. // 标签自动布局、全局过渡动画等特性
13. import { LabelLayout, UniversalTransition } from "echarts/features";
15. // 组件类型的定义后缀都为 ComponentOption
16. import type {
17.     TitleComponentOption,
18.     TooltipComponentOption,
19.     GridComponentOption,
20.     DatasetComponentOption,
21.     ToolboxComponentOption,
22.     LegendComponentOption
23. } from "echarts/components";
25. // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
26. import { CanvasRenderer } from "echarts/renderers";
28. // 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
29. export type CORE_ECOption =
30.     | TitleComponentOption
31.     | TooltipComponentOption
32.     | GridComponentOption
33.     | DatasetComponentOption
34.     | ToolboxComponentOption
35.     | LegendComponentOption;
37. const CORE = [
38.     TitleComponent,
39.     TooltipComponent,
40.     GridComponent,
41.     DatasetComponent,
42.     TransformComponent,
43.     ToolboxComponent,
44.     LegendComponent,
45.     LabelLayout,
46.     UniversalTransition,
47.     CanvasRenderer
48. ];
50. export default CORE;

复制代码

 

1.  

复制代码

BarChart.ts 如下：
 

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

复制代码

 
 
LineChart.ts 如下:
 

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

复制代码

 

1.  

复制代码

RadarChart.ts 如下:
 

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

复制代码

 

1.  

复制代码

如果项目中还用到其他图表类型，则按照具体需要引入即可。
可以根据具体业务进行调用封装，下面是封装的示例 util.ts:
 

1. import Echarts from "/echarts/Index";
3. export const renderEcharts = async (type: string[], dom: string, option: any = {}, callback?: any) => {
4.     if (!dom) return;
6.     new Echarts(type, (echart: any) => {
7.         const _dom: any = document.querySelector(dom);
9.         const echarts_instance = echart.init(_dom);
11.         echarts_instance.setOption(option);
13.         window.addEventListener("resize", function () {
14.             echarts_instance.resize();
15.             echarts_instance.clear();
16.             echarts_instance.setOption(option);
17.         });
19.         _dom?.addEventListener("touchend", () => {
20.             setTimeout(() => {
21.                 echarts_instance.dispatchAction({
22.                     type: "hideTip"
23.                 });
24.                 echarts_instance.dispatchAction({
25.                     type: "updateAxisPointer"
26.                 });
27.             }, 1000);
28.         });
30.         callback && callback(echarts_instance);
31.     });
32. };

复制代码

 
 
具体调用：
 

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

复制代码

 

来源:https://www.cnblogs.com/Man-Dream-Necessary/p/18371493
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！