[echarts] Apache Echarts 브라우저 크기에 따라 자동 사이즈 조정

chart를 만들었는데, 모니터 크기나 브라우저 크기에 맞지 않을 때가 있다.

이어지는 내용에선 위와 같은 경우에 chart크기를 자동으로 조정하는 방법을 서술한다.

 

React + Typescript 환경에서의 코드이다.

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

	  // option은 따로 지정해뒀다고 가정한다.
      chart.setOption(option);

      // 크기가 변경될 경우 chart가 resize되는 function을 만든다.
      window.onresize = function () {
        chart.resize();
      };

      // 창 크기 조절 이벤트 리스너 등록
      window.addEventListener("resize", () => chart.resize());

      return () => {
        // 창 크기 조절 이벤트 리스너 삭제
        window.removeEventListener("resize", () => chart.resize());
      };
    }
  }, [option, chartRef]);

return (
    <div className={styles.component}>
      <div ref={chartRef} style={{ height: 250 }} />
    </div>
);

이와 같이 이미 Apache echarts 에는 resize function이 존재한다.
이를 window.onresize를 통해 화면 크기에 변화가 생겼을 경우 useEffect로 감지하여 function을 적용시켜 주기만 하면 된다.