SPB Git
1019 B · 32 lines typescript
1'use client';23import { useEffect, useRef } from 'react';4import echarts, { type EChartsOption } from './echarts';56/** Mounts an ECharts instance on a div, keeps it sized with ResizeObserver, applies `option` when it changes. */7export function useEChart(option: EChartsOption | null, deps: unknown[] = []) {8  const ref = useRef<HTMLDivElement>(null);9  const chartRef = useRef<echarts.ECharts | null>(null);1011  useEffect(() => {12    const el = ref.current;13    if (!el) return;14    const chart = echarts.init(el, undefined, { renderer: 'canvas' });15    chartRef.current = chart;16    const ro = new ResizeObserver(() => chart.resize());17    ro.observe(el);18    return () => {19      ro.disconnect();20      chart.dispose();21      chartRef.current = null;22    };23  }, []);2425  useEffect(() => {26    if (option && chartRef.current) chartRef.current.setOption(option, { notMerge: true, lazyUpdate: true });27    // eslint-disable-next-line react-hooks/exhaustive-deps28  }, [option, ...deps]);2930  return { ref, chartRef };31}32
Files · 816281851c37def11cd68afb6b0700b3b590a2cb
Menu

Theme