Vue3 개발 가이드

RealChart는 Vue3 환경에서 쉽게 사용할 수 있도록 Wrapper 라이브러리 (opens in a new tab)를 제공한다.
props를 통해 차트의 config 및 차트 컨테이너의 속성을 설정할 수 있다. 또한 ref를 통해 직접 차트 인스턴스에 접근하여 API를 사용할 수 있다.

설치 방법

npm install realchart-vue

또는

yarn add realchart-vue

사용 예시

<template>
  <RealChartVue
    :realchart="realchart"
    :config="chartConfig"
  />
</template>
 
<script setup lang="ts">
import * as realchart from 'realchart';
import { RealChartVue } from 'realchart-vue';
 
const chartConfig = {
    title: '카테고리별 판매량',
    xAxis: {
        categories: ['식품', '전자제품', '의류'],
    },
    series: {
        type: 'bar',
        xField: 'category',
        yField: 'quantity',
        data: [
            { category: '식품', quantity: 120 },
            { category: '전자제품', quantity: 80 },
            { category: '의류', quantity: 50 },
        ],
    },
};
</script>

컴포넌트 설명

props

Prop	타입	설명	필수 여부
`realchart`	`typeof RealChart`	RealChart 모듈	✅
`config`	`ChartConfiguration`	차트 구성 옵션	✅
`id`	`string`	차트 DOM ID (기본값: "realchart")	❌
`w`	`string`	차트 width (기본값: "100%")	❌
`h`	`string`	차트 height (기본값: "100%")	❌
`animate`	`boolean`	애니메이션 사용 여부 (기본값: `true`)	❌
`onChartLoaded`	`(args: LoadCallbackArgs) => void`	차트 로드 후 호출되는 콜백	❌

RealChartVueRef

ref를 사용해 RealChart 인스턴스에 접근할 수 있습니다.

export interface RealChartVueRef {
  realchart: Ref<Chart | null>
}

사용 예시

chartRef.value?.realchart?.xAxis.grid.toggleOption('visible');

React 개발 가이드 Tutorial