react-vchart如何实现按需加载？问题标题 react-vchart如何实现按需加载？问题描述 H5项目使用v

问题标题

react-vchart如何实现按需加载？

问题描述

H5项目使用vchart 体积超限现在能支持按需加载吗? 目前只用了一个漏斗图

解决方案

React-VChart 本身代码都支持按需加载，当需要 VChart 按需加载的时候，建议使用 <VChartSimple /> 标签， <VChartSimple />组件和<VChart />组件使用方法基本完全相同，唯一差异点为，需要用户从 @viasctor/vchart 引用 VChart 构造类，并传入给 <VChartSimple />; VChart 按需引用参考相关文档

interface VChartSimpleProps extends EventsProps {
  /** 图表定义 */
  spec: any;
  /** 图表配置 */
  options?: ChartOptions;
  /** 图表渲染完成事件 */
  onReady?: (instance: VChart, isInitial: boolean) => void;
  /** throw error when chart run into an error */
  onError?: (err: Error) => void;
  /**
   * 切换到同步渲染
   * @since 1.8.3
   **/
  useSyncRender?: boolean;
  /**
   * props更新的时候，跳过所有函数的检查，即所有的函数都认为没有更新
   * @since 1.6.5
   **/
  skipFunctionDiff?: boolean;
  /**
   * VChart构造类
   * @since 1.8.3
   **/
  vchartConstrouctor: IVChartConstructor;
}

代码示例

/* @refresh reset */
import React, { useMemo } from "react";

import { VChartSimple } from "@visactor/react-vchart";
import { VChart } from "@visactor/vchart/esm/core" 
import { registerFunnelChart } from "@visactor/vchaart/esm/chart/funnel"

// eslint-disable-next-line react-hooks/rules-off-hooks
VChart.useRegisters([registerFunnelChart])

export const FunnelChart = (props) => {
    const spec = useMemo(() =>{
     // ....
    },[]);
    
    return (
        <React.Fragment>
          <VChartSimple spec={spec}_vchartConstrouctor={VChart} />
        </React.Fragment>
    );
};