ECharts折线图：自适应容器宽度，灵动展示数据

2023-10-09 12:38:08

前言

在数据可视化领域，ECharts凭借其强大的图表绘制功能和丰富的交互体验，成为开发者构建交互式图表的不二之选。然而，在实际应用中，图表容器的宽度经常受到页面布局的限制，导致图表无法充分利用可用空间。本文将介绍一种基于React和resize-observer-polyfill库实现的解决方案，让ECharts折线图可以根据容器宽度自适应展示，灵活适应不同尺寸的页面布局。

实现原理

1. 使用React的useRef获取容器元素引用

首先，我们需要使用React的useRef钩子获取图表容器元素的引用。useRef是一个React内置的钩子，用于创建可变的引用对象。通过它，我们可以获取到图表容器元素的DOM节点，并将其存储在引用对象中。

const containerRef = useRef(null);

2. 使用resize-observer-polyfill监听容器宽度变化

有了容器元素引用后，下一步就是监听容器宽度的变化。这里我们将使用resize-observer-polyfill库，它提供了一种跨浏览器的解决方案，可以监听DOM元素大小变化。

useEffect(() => {
  const resizeObserver = new ResizeObserver(() => {
    // 容器宽度变化时触发回调函数
    handleResize();
  });
  resizeObserver.observe(containerRef.current);

  return () => {
    // 组件卸载时移除监听器
    resizeObserver.unobserve(containerRef.current);
  };
}, [containerRef]);

3. ECharts resize重绘实现自适应

resize-observer-polyfill库提供了一个回调函数，当容器宽度变化时会触发该函数。在回调函数中，我们可以调用ECharts的resize方法，让图表根据新的容器宽度重新绘制。

const handleResize = () => {
  if (containerRef.current && myChart) {
    myChart.resize();
  }
};

实际应用

下面是一个完整的React组件示例，展示了如何使用useRef和resize-observer-polyfill实现ECharts折线图的自适应展示：

import React, { useEffect, useRef } from "react";
import { LineChart } from "echarts/charts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { resizeObserverPolyfill } from "resize-observer-polyfill";

use([CanvasRenderer]);

const EchartsLineChart = () => {
  const containerRef = useRef(null);
  const myChart = useRef(null);

  useEffect(() => {
    const resizeObserver = new ResizeObserver(() => {
      handleResize();
    });
    resizeObserver.observe(containerRef.current);

    return () => {
      resizeObserver.unobserve(containerRef.current);
    };
  }, [containerRef]);

  const handleResize = () => {
    if (containerRef.current && myChart.current) {
      myChart.current.resize();
    }
  };

  useEffect(() => {
    myChart.current = echarts.init(containerRef.current);
    const option = {
      // ... 配置图表选项
    };
    myChart.current.setOption(option);
  }, [containerRef]);

  return <div ref={containerRef} />;
};

export default EchartsLineChart;