官网提供的按需引入方法为全量按需引入，在打包分离中，仍旧存在使用不到的图表被打包进去。
例如：组件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 如下：
// 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Componentimport { TitleComponent, TooltipComponent, GridComponent, DatasetComponent, TransformComponent, ToolboxComponent, LegendComponent} from "echarts/components";//标签自动布局、全局过渡动画等特性import { LabelLayout, UniversalTransition } from"echarts/features";// 组件类型的定义后缀都为 ComponentOptionimport 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 defaultCORE;
BarChart.ts 如下：
import { BarChart } from"echarts/charts";// 系列类型的定义后缀都为 SeriesOptionimport type { BarSeriesOption } from"echarts/charts";export type BarChart_ECOption =BarSeriesOption;exportdefaultBarChart;
LineChart.ts 如下:
import { LineChart } from"echarts/charts";// 系列类型的定义后缀都为 SeriesOptionimport type { LineSeriesOption } from"echarts/charts";// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型export type LineChart_ECOption =LineSeriesOption;exportdefaultLineChart;
RadarChart.ts 如下:
import { RadarChart } from"echarts/charts";// 系列类型的定义后缀都为 SeriesOptionimport type { RadarSeriesOption } from"echarts/charts";// 组件类型的定义后缀都为 ComponentOptionimport type { RadarComponentOption } from"echarts/components";// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型export type RadarChart_ECOption = RadarComponentOption |RadarSeriesOption;exportdefaultRadarChart;
如果项目中还用到其他图表类型，则按照具体需要引入即可。
可以根据具体业务进行调用封装，下面是封装的示例 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;});