React+ResizeObserver實現(xiàn)自適應ECharts圖表

更新時間：2024年01月04日 09:22:14 作者：Evan不懂前端

ResizeObserver是JavaScript的一個API,用于監(jiān)測元素的大小變化,本文主要為大家介紹了React如何利用ResizeObserver實現(xiàn)自適應ECharts圖表,需要的可以參考下

摘要

在現(xiàn)代 Web 開發(fā)中，響應式布局和數據可視化是非常常見的需求。本文將介紹如何使用React、ResizeObserver和ECharts庫來創(chuàng)建一個自適應的圖表組件。

什么是ResizeObserver

ResizeObserver是JavaScript的一個API，用于監(jiān)測元素的大小變化。它可以在元素大小發(fā)生變化時觸發(fā)回調函數，使我們能夠及時地作出相應的調整。

為什么使用ResizeObserver

在響應式布局中，我們經常需要根據容器的大小調整圖表的尺寸。傳統(tǒng)的方式是使用定時器或者事件監(jiān)聽器來檢測容器大小的變化，但這些方法效率較低且不夠精確。

ResizeObserver提供了一種更高效和準確的方式來監(jiān)測元素的大小變化。它能夠實時地感知元素的大小改變，并立即觸發(fā)回調函數。

使用React創(chuàng)建圖表組件

首先，我們將使用React來創(chuàng)建一個基本的圖表組件。我們將使用ECharts作為數據可視化庫來渲染圖表。

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

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

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

    const options = {
      // 配置圖表選項
      // ...
    };

    chart.setOption(options);

    return () => {
      chart.dispose(); // 銷毀圖表
    };
  }, [data]);

  return <div ref={chartRef} style={{ width: '100%', height: '400px' }} />;
};

export default Chart;

在上面的代碼中，我們創(chuàng)建了一個名為Chart的函數組件。組件接收一個名為data的屬性，它用于更新圖表的數據。

在組件的useEffect鉤子函數中，我們初始化了ECharts實例，并通過setOption方法設置圖表的選項。我們還在組件卸載時使用dispose方法銷毀了圖表實例，以釋放資源。

組件的返回部分包含一個<div>元素，我們使用ref屬性將其與chartRef關聯(lián)起來。這個<div>元素將作為ECharts圖表的容器，并且我們?yōu)槠湓O置了寬度為100%和高度為400像素，你可以根據需要調整這些值。

使用ResizeObserver監(jiān)聽容器大小變化

現(xiàn)在，我們要使用ResizeObserver來監(jiān)聽圖表容器的大小變化，并在大小發(fā)生變化時重新渲染圖表。

為此，我們將使用一個名為useResizeObserver的自定義Hook，它使用ResizeObserver API來監(jiān)聽元素的大小變化。

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;

在上面的代碼中，我們定義了一個名為useResizeObserver的Hook。它接收一個ref作為參數，該ref引用了要監(jiān)聽的元素。每當元素的大小發(fā)生變化時，我們會更新dimensions狀態(tài)，以便我們能夠在組件中獲取到最新的寬度和高度。

現(xiàn)在，我們可以在我們的Chart組件中使用useResizeObserver來監(jiān)聽容器的大小變化，并相應地重新渲染圖表。

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 <div ref={chartRef} style={{ width: '100%', height: '400px' }} />;
};

export default Chart;

在上述示例代碼中，我們從useResizeObserver鉤子中獲取到最新的dimensions值，并將其添加到useEffect的依賴數組中。這意味著每當容器的大小發(fā)生變化時，我們都會重新執(zhí)行副作用函數并重新渲染圖表。

這樣，當圖表容器的大小發(fā)生變化時，圖表將自動根據新的尺寸重新繪制，以便適應新的布局。