Echart
Echart(Echart) 위젯은 ECharts 기반의 인터랙티브 차트를 그려주는 위젯입니다.
막대·선·원형 등 다양한 차트를 옵션(JSON)으로 정의하고, 데이터를 변수로 바인딩해 표시합니다.
정의 / 역할
Echart 위젯은 내부 WebView에 ECharts를 로드해 차트를 렌더링합니다. 차트 모양은 ECharts 옵션(JSON)으로 정의하고, 데이터 항목은 변수 목록에 바인딩해 채웁니다. 실행 중에는 스크립트로 옵션·데이터·액션을 갱신할 수 있습니다.
- 카테고리: Contents
- 기본 크기: 너비
300/ 높이200 - 기본 렌더러: canvas (선택적으로 SVG)
- 편집(디자인) 모드에서는 실제 차트 대신
Echart라벨이 있는 자리표시 영역이 보이고, 앱 실행 시 차트가 그려집니다.
기능
| 기능 | 설명 |
|---|---|
| 차트 렌더링 | ECharts 옵션(JSON)으로 정의한 차트를 그립니다. |
| 데이터 바인딩 | 옵션 템플릿의 변수 자리에 데이터(리스트·단일 값)를 바인딩해 채웁니다. |
| 렌더러 선택 | canvas 또는 SVG 렌더러를 선택합니다. |
| 배경색 | 차트 배경색을 설정합니다. |
| 로딩 표시 | 차트 로딩 중 로딩 인디케이터 표시 여부를 설정합니다. |
| 스크립트 제어 | 실행 중 스크립트로 옵션·데이터를 갱신하고 차트 액션을 전달합니다. |
사용 방법
- 왼쪽 위젯 팔레트에서 Contents 카테고리를 엽니다.
- Echart 항목을 캔버스로 끌어다 놓습니다.
- 오른쪽 속성 패널에서
Echart Data(옵션 템플릿·데이터 변수)를 설정합니다. - 필요하면 배경색(
bgColor)·렌더러(useSvgRenderer)·로딩 표시(showLoadingBar) 등을 조정합니다.
속성 (Property)
| 속성 | 설명 | 기본값 | 값 / 타입 |
|---|---|---|---|
bgColor | 차트 배경색 | 미지정 | 색상 |
Echart Data | 차트 옵션 템플릿(JSON)과 데이터 변수 목록 | 빈 옵션(변수 없음) | 차트 데이터 |
showLoadingBar | 차트 로딩 중 로딩 인디케이터 표시 여부 | false | 참/거짓 |
useSvgRenderer | SVG 렌더러 사용 여부 (꺼짐이면 canvas) | false | 참/거짓 |
embedInParentScroll | 부모 스크롤에 마우스휠 이벤트 전달 (macOS) | true | 참/거짓 |
주의 / 팁
노트
편집(디자인) 모드에서는 Echart 라벨 자리표시만 보이며, 실제 차트는 앱 실행 시 렌더링됩니다.
팁
canvas 렌더링에 문제가 있으면 useSvgRenderer를 켜서 SVG 렌더러로 전환할 수 있습니다. 실행 중에는 스크립트로 옵션·데이터를 갱신해 차트를 다시 그릴 수 있습니다.
더 알아보기
팁
이 위젯을 스크립트로 제어하는 Widget Control(Property·Method·Event) 전체는 Echart (Echart) Widget Control 문서에서 확인하세요.