소개

차기 프로젝트에서 사용할 차트 유형을 정리하고 Apache Echarts 라이브러리로 차트 예제를 구현했습니다.

<aside> ⚙️ 개발 버전 "echarts": "^5.4.2”

</aside>

설치 및 실행

npm install
npm run dev

주요 파일

1. Page

   /app/chart/page.tsx

2. Template

   /components/Templates/Chart/index.tsx

3. Chart 컴포넌트

   /components/Shared/Chart/index.tsx

   • 코드 설명

4. Chart Configs

   /libraries/echarts/chartConfigs/[각 설정 파일].ts

   config 파일을 chart 컴포넌트에 option으로 넘겨서 사용합니다.

   ※ bar2.ts 파일에서 graphic 부분은 차트에 집계중을 표시하는 코드입니다. left, y 값으로 위치를 지정하였으며 추후 차트마다 적절한 위치를 설정하여 적용하면 됩니다.

   // bar2.ts
   graphic: {
       elements: [
           {
               type: 'text',
               left: '72.3%',
               y: 135,
               style: {
                   text: '집계중',
                   fill: '#90A4AE',
                   font: '12px',
                   opacity: textOpacity
               }
           },
           {
               type: 'text',
               left: '81%',
               y: 135,
               style: {
                   text: '집계중',
                   fill: '#90A4AE',
                   font: '12px',
                   opacity: textOpacity
               }
           }
       ]
   }
   

5. Utils

   /libraries/echarts/...

   1. convertAddingUp.ts

      (number|null)[] 데이터 배열을 받아서 값이 null일 때 집계중 라벨을 추가하는 유틸입니다.

      bar가 1개인 차트인 경우 해당 라벨을 차트에 표시해 사용할 수 있습니다.

      bar가 2개이고 기획 요구사항처럼 두 개의 바 중앙에 ‘집계중’을 표시기 위해서는 이 유틸로 추가되는 라벨을 이용하지 않고 graphic 요소로 그려 넣어야 합니다. 대신 마우스 오버 시 표시될 툴팁에서 해당 라벨이 ‘집계중’인지를 확인하여 ‘집계중 입니다.’로 출력해주고 있습니다.

      // Templates/Chart/index.tsx
      const selectTooltip = (params: ECElementEvent) => {
          if (data && params.seriesIndex && params.dataIndex) {
              const valueData = data[params.seriesIndex]?.[params.dataIndex];
      
              const value =
                  typeof valueData === 'number'
                      ? valueData
                      : valueData?.label?.formatter === '집계중'
                      ? '집계중입니다.'
                      : valueData?.value;
      
              setTooltip({
                  show: true,
                  name: params.seriesName + params.name,
                  value
              });
          }
      };
      

      또한, echarts에서 제공하는 공식 타입을 적용하면 value에 null 값을 포함할 수 없으므로 집계중(null)인 경우 나머지 데이터의 산술평균으로 value 값을 설정합니다.

   2. createCustomTooltip.ts

      툴팁 공통 디자인을 설정하기 위해서 만든 툴팁 객체 생성 유틸입니다. 배경색, 텍스트 색상, padding 등이 설정되어있습니다.

      호출 시 툴팁 내용 포맷을 설정하기 위한 formatter 함수를 넘겨주어야 합니다.

      formatter 함수에서 인자로 받을 수 있는 params는 데이터가 단일 값이 아닌 이상 배열로 들어오기 때문에 Array.isArray(params) 조건식이 적용되어있는데, 이 부분은 제거하거나 단일 값일 때의 포맷을 정의해주는 것이 좋겠습니다. (현재는 '데이터가 없습니다.’가 리턴되고 있습니다.)