mmmml-zhao / echarts-for-react-fc

Using ECharts in React, encapsulating it within a functional component, and providing a hook for consumers to consume.
3 stars 0 forks source link

ResizeObserver loop completed with undelivered notifications #7

Closed jianaijun closed 4 months ago

jianaijun commented 6 months ago

Describe the bug: open developer tools. When updating UI, the following error occurs:

Uncaught runtime errors:
×
ERROR

**ResizeObserver loop completed with undelivered notifications.**

    at handleError (http://localhost:3000/echo/static/js/bundle.js:228849:58)
    at http://localhost:3000/echo/static/js/bundle.js:228868:7

Frameworks/Libraries used React 18.2.0 echarts-for-react-fc 1.0.0

Use example code . Set the width or height to be greater than the visual / available size, exampe: width: 4000, height: 3000

import { useCallback, useEffect, useMemo, useState } from "react";

import * as echarts from "echarts/core";
import { GridComponent } from "echarts/components";
import { LineChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";

import EChartsReact, {
  useChart,
  EChartsReactProps,
} from "echarts-for-react-fc";

echarts.use([GridComponent, LineChart, CanvasRenderer]);

const TestChart = () => {
  const { chartRef, setChartOption, handleListenChartReady } = useChart();

  useEffect(() => {
    setChartOption({
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          id: 1,
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "line",
        },
      ],
    });

    setTimeout(() => {
      setChartOption({
        series: [
          {
            id: 2,
            data: [400, 130, 224, 118, 35, 47, 260],
            type: "line",
          },
        ],
      });
    }, 2000);
  }, []);

  return (
    <EChartsReact
      style={{
        width: 4000,
        height: 3000,
      }}
      ref={chartRef}
      echarts={echarts}
      onChartReady={handleListenChartReady}
    />
  );
};

export default TestChart;

Reason Reference ResizeObserver

mmmml-zhao commented 4 months ago

I'm sorry, I couldn't reproduce this situation. Could you provide a CodeSandbox link?

image