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：
Top comments (0)