ECharts란?

ECharts는 Apache에서 제작한 차트 라이브러리이며 오픈소스이다. (Apache-2.0 License)

Line, Bar, Pie 등 다양한 차트를 제공하며, 정말 다양한 option이 있기 때문에 커스터마이징 할 수 있는 폭이 넓다. 또한, 공식문서가 굉장히 잘 되어있기 때문에 구현하기가 쉽다.

Apache ECharts

React에서 사용하기

React에서 ECharts를 사용하기 위한 2가지 방법이 있다.

1. useRef로 특정 DOM에 ECharts를 렌더링 하기
2. echarts-for-react 라이브러리를 사용하기

useRef로 특정 DOM에 ECharts를 렌더링 하기

ECharts는 기본적으로 DOM Element를 사용해 인스턴스를 생성하기 때문에, useRef를 사용하여 ECharts를 렌더링 하기 위한 DOM Element를 제공해야 한다.

우선 npm에서 ‘echarts’를 설치한다.

npm i echarts

useRef로 ECharts를 그려낼 DOM Element를 가져온 후 다음과 같이 작업한다.

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

function Chart() {
  const chartRef = useRef(null);
  const [options, setOptions] = useState({
		xAxis: {
	    type: 'category',
	    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	  },
	  yAxis: {
	    type: 'value'
	  },
	  series: [
	    {
	      data: [150, 230, 224, 218, 135, 147, 260],
	      type: 'line'
	    }
	  ]
	});

  useEffect(() => {
		if (chartRef.current) {
	    const chart = echarts.init(chartRef.current);
	
	    chart.setOption(options);
		}
  }, [options, chartRef]);

  return (
    <div
      ref={chartRef}
      style={{
        width: "100%",
        height: "100%",
      }}
    />
  )
}

이렇게 ECharts를 별도의 라이브러리 없이 React에서 사용할 수 있다.

하지만, 차트가 리사이징될 때 별도의 작업이 필요하며, 차트를 종류별로 import해서 사용하고 싶다면 별도의 컴포넌트를 일일이 만들어줘야 된다.

따라서, ‘echarts-for-react’라는 echarts를 React로 래핑한 라이브러리를 사용하는 것이 더욱 편리하다.