论坛 › JavaScript › Echarts 5 动态按需引入图表

岭北黑山雕 发表于 2024-8-22 00:44:14

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

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

查看完整版本: Echarts 5 动态按需引入图表