#차트 옵션

차트의 표시 방식을 설정합니다. Basic (시각적) 모드와 Custom (JS 사용자 정의) 모드, 두 가지를 지원합니다. Basic 모드는 빠른 매핑과 일반적인 속성 설정에 적합하며, Custom 모드는 복잡한 시나리오와 고급 사용자 정의에 유용합니다.

#패널 구조

팁: 현재 내용을 더 편리하게 설정하려면 다른 패널을 먼저 접어두는 것이 좋습니다.

가장 위쪽에는 작업 표시줄이 있습니다. 모드 선택:

• Basic: 시각적 설정으로, 유형을 선택하고 필드 매핑을 완료합니다. 일반적인 속성은 스위치로 바로 조정할 수 있습니다.
• Custom: 에디터에서 JS를 작성하여 ECharts option을 반환합니다.

#Basic 모드

#차트 유형 선택

• 꺾은선형 차트, 영역형 차트, 세로 막대형 차트, 가로 막대형 차트, 원형 차트, 도넛형 차트, 깔때기형 차트, 분산형 차트 등을 지원합니다.
• 차트 유형에 따라 필요한 필드가 다를 수 있으므로, 먼저 "데이터 쿼리 → 데이터 보기"에서 열 이름과 유형을 확인해야 합니다.

#필드 매핑

• 꺾은선형/영역형/세로 막대형/가로 막대형:
  • xField: 차원 (예: 날짜, 카테고리, 지역)
  • yField: 측정값 (집계된 숫자 값)
  • seriesField (선택 사항): 시리즈 그룹화 (여러 선/그룹에 사용)
• 원형/도넛형:
  • Category: 분류 차원
  • Value: 측정값
• 깔때기형:
  • Category: 단계/분류
  • Value: 값 (일반적으로 수량 또는 비율)
• 분산형:
  • xField, yField: 두 개의 측정값 또는 차원 (축에 사용)

더 많은 차트 옵션 설정은 ECharts 문서의 축 및 예시를 참고해 주세요.

참고:

• 차원 또는 측정값이 변경된 후에는 빈 차트나 잘못 정렬된 차트가 나타나지 않도록 매핑을 다시 확인해야 합니다.
• 원형/도넛형 차트와 깔때기형 차트에는 "분류 + 값" 조합을 반드시 제공해야 합니다.

#일반 속성

• 스택, 부드럽게 (꺾은선형/영역형)
• 레이블 표시, 툴팁, 범례
• 축 레이블 회전, 구분선
• 원형/도넛형의 반지름 및 내부 반지름, 깔때기형 정렬 방식

권장 사항:

• 시계열 데이터에는 꺾은선형/영역형 차트를 사용하고 적절하게 부드럽게 표시 기능을 켜는 것이 좋습니다. 주요 카테고리 비교에는 세로 막대형/가로 막대형 차트를 사용하세요.
• 데이터가 밀집되어 있을 때는 가려지는 것을 방지하기 위해 모든 레이블을 켤 필요는 없습니다.

#Custom 모드

전체 ECharts option을 반환하는 데 사용되며, 여러 시리즈 병합, 복잡한 툴팁, 동적 스타일 등 고급 사용자 정의에 적합합니다. 권장 사용법은 데이터를 dataset.source에 통합하는 것입니다. 자세한 사용법은 ECharts 문서의 Dataset을 참고해 주세요.

#데이터 컨텍스트

• ctx.data.objects: 객체 배열 (각 행을 객체로, 권장)
• ctx.data.rows: 2차원 배열 (헤더 포함)
• ctx.data.columns: 열별로 그룹화된 2차원 배열

#예시: 월별 주문 꺾은선형 차트

return {
  dataset: { source: ctx.data.objects || [] },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [
    {
      type: 'line',
      smooth: true,
      showSymbol: false,
    },
  ],
}

#미리 보기 및 저장

• Custom 모드에서 수정을 마친 후에는 오른쪽에 있는 "미리 보기" 버튼을 클릭하여 차트 미리 보기를 업데이트할 수 있습니다.
• 하단에서 "저장"을 클릭하여 설정을 적용하고 저장합니다. "취소"를 클릭하면 이번에 변경된 모든 설정이 되돌려집니다.