DEV Community

Siji Chen
Siji Chen

Posted on

How does react-vchart achieve on-demand loading?


How does react-vchart achieve on-demand loading?


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


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;
Enter fullscreen mode Exit fullscreen mode

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

export const FunnelChart = (props) => {
    const spec = useMemo(() =>{
     // ....

    return (
          <VChartSimple spec={spec}_vchartConstrouctor={VChart} />
Enter fullscreen mode Exit fullscreen mode

Related Documentation

Related Tutorial:


Top comments (0)