How does react-vchart achieve on-demand loading?

Title

How does react-vchart achieve on-demand loading?

Description

H5 project uses vchart volume limit, can it support on-demand loading now? Currently only one funnel chart is used.

Solution

React-VChart itself supports on-demand loading. When VChart needs to be loaded on demand, it is recommended to use the <VChartSimple /> tag,
The <VChartSimple /> component and the <VChart /> component are used in almost the same way. The only difference is that users need to import the VChart constructor class from @viasctor/vchart and pass it to <VChartSimple />; Reference for on-demand import of VChart related documents

interface VChartSimpleProps extends EventsProps {
  /** the spec of chart */
  spec: any;
  /** the options of chart */
  options?: ChartOptions;
  /** call when the chart is rendered */
  onReady?: (instance: VChart, isInitial: boolean) => void;
  /** throw error when chart run into an error */
  onError?: (err: Error) => void;
  /** 
   * use renderSync
   * @since 1.8.3
   **/
  useSyncRender?: boolean;
  /**
   * skip the difference of all functions
   * @since 1.6.5
   **/
  skipFunctionDiff?: boolean;
  /**
   * the constrouctor class of vchart
   * @since 1.8.3
   **/
  vchartConstrouctor: IVChartConstructor;
}

Code Example

/* @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>
    );
};

Related Documentation

Related Tutorial：

• https://www.visactor.io/vchart/guide/tutorial\_docs/Cross-terminal\_and\_Developer\_Ecology/react

• https://www.visactor.io/vchart/guide/tutorial\_docs/Load\_on\_Demand

github：https://github.com/VisActor/VChart