如何让echarts与react-grid-layout一起调整大小？

Question

我在我的应用程序中使用ResponsiveGridLayout，React- grid -Layout，我使用echarts作为网格项。

拖放可以正常工作，但是当我调整网格项的大小时，图表并没有随之调整大小。我已经尝试实现了onLayoutchange属性，但它不起作用。

有没有人能帮帮我

这是我复制该问题的codesandbox

Answer 1

我能够做到这一点，至少在修改网格项宽度(还不是高度...)时，使用this hook，然后在您的图表组件中：

[...]

const chartRef = useRef<HTMLDivElement>();
const size = useComponentSize(chartRef);

useEffect(() => {
  const chart = chartRef.current && echarts.getInstanceByDom(chartRef.current);
  if (chart) {
    chart.resize();
  }
}, [size]);

[...]

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

...so当调整网格项的大小时，图表将调整大小。我不确定，对我来说仍然是一个WIP，但它是有效的。

将其提取为自定义钩子

您可以基于@rehooks/component-size创建useEchartResizer.ts：

import useComponentSize from '@rehooks/component-size';
import * as echarts from 'echarts';
import React, { useEffect } from 'react';
    
export const useEchartResizer = (chartRef: React.MutableRefObject<HTMLDivElement>) => {
  const size = useComponentSize(chartRef);
   
  useEffect(() => {
    const chart = chartRef.current && echarts.getInstanceByDom(chartRef.current);
    if (chart) {
      chart.resize();
    }
  }, [chartRef, size]);
};

然后在包含图表的组件中使用它：

export const ComponentWithChart = (props): React.ReactElement => {
  const chartRef = useRef<HTMLDivElement>();
  useEchartResizer(chartRef);

  useEffect(() => {
    const chart = echarts.init(chartRef.current, null);
    // do not set chart height in options
    // but you need to ensure that the containing div is not "flat" (height = 0)
    chart.setOption({...} as EChartsOption); 
  });

  return (<div ref={chartRef}></div>);
});

因此，每次调整div的大小时，useEchartResizer都会触发一个chart.resize()。与react-grid-layout配合使用效果很好。