使用React和ResizeObserver实现自适应ECharts图表

元素将作为ECharts图表的容器，并且我们为其设置了宽度为100%和高度为400像素，你可以根据需要调整这些值。

使用ResizeObserver监听容器大小变化

现在，我们要使用ResizeObserver来监听图表容器的大小变化，并在大小发生变化时重新渲染图表。

为此，我们将使用一个名为useResizeObserver的自定义Hook，它使用ResizeObserver API来监听元素的大小变化。

import { useEffect, useState } from 'react';

const useResizeObserver = (ref) => {
  const [dimensions, setDimensions] = useState(null);

  useEffect(() => {
    const observer = new ResizeObserver((entries) => {
      const { width, height } = entries[0].contentRect;
      setDimensions({ width, height });
    });

    observer.observe(ref.current);

    return () => {
      observer.unobserve(ref.current);
    };
  }, [ref]);

  return dimensions;
};

export default useResizeObserver;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在上面的代码中，我们定义了一个名为useResizeObserver的Hook。它接收一个ref作为参数，该ref引用了要监听的元素。每当元素的大小发生变化时，我们会更新dimensions状态，以便我们能够在组件中获取到最新的宽度和高度。

现在，我们可以在我们的Chart组件中使用useResizeObserver来监听容器的大小变化，并相应地重新渲染图表。

import React, { useEffect, useRef } from 'react';
import echarts from 'echarts';
import useResizeObserver from './useResizeObserver';

const Chart = ({ data }) => {
  const chartRef = useRef(null);
  const dimensions = useResizeObserver(chartRef);

  useEffect(() => {
    const chart = echarts.init(chartRef.current);

    const options = {
      // 配置图表选项
      // ...
    };

    chart.setOption(options);

    return () => {
      chart.dispose();
    };
  }, [data, dimensions]);

  return 
{ width: '100%', height: '400px' }} />;
};

export default Chart;


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

在上述示例代码中，我们从useResizeObserver钩子中获取到最新的dimensions值，并将其添加到useEffect的依赖数组中。这意味着每当容器的大小发生变化时，我们都会重新执行副作用函数并重新渲染图表。

这样，当图表容器的大小发生变化时，图表将自动根据新的尺寸重新绘制，以便适应新的布局。

结论

通过使用React、ResizeObserver和ECharts，我们可以轻松地创建自适应的图表组件。借助ResizeObserver，我们可以有效地监听元素大小的变化，而不需要使用定时器或事件监听器。

希望本文对你理解如何使用React、ResizeObserver和ECharts来创建自适应的图表有所帮助。你可以在你的项目中尝试并根据自己的需求来定制图表组件。