Vue-Chart
라이브러리를 사용하면 간단한 API와 컴포넌트 기반 인터페이스를 제공하여 차트를 쉽게 구성할 수 있다.pnpm i vue-chart-3
Vue-ApexCharts
를 사용하면 레이더 차트, 막대 차트, 선 그래프 등 다양한 차트 유형을 생성할 수 있다.pnpm i vue3-apexcharts
Vue-ECharts
를 사용하면 다양한 유형의 인터랙티브 차트를 만들 수 있다.pnpm i vue3-echarts
우선 TypeScript가 지원이 되야한다.
이번 프로젝트에서는 프론트를 2명이서 함께 개발하다보니 협업에 조금 더 유리한 언어를 사용해야했다. 그래서 Typescript를 골랐고 또한 Ts를 지원하는 library여야했다.
물론 TypeScript와 더욱 잘맞는 라이브러리는 따로 있다. Highcharts, Plotly.js, amCharts, etc..
아무래도 지자체에 공급하다보니 반드시 한국어가 깨지지 않고 들어가야했다. 그래서 다국어 지원을 제공하고 한글 텍스트를 제대로 표시하는 라이브러리가 필요했다.
그래서 ApexCharts와 ECharts를 뽑을 수 있었다.
참고로 Vue ECharts는 다국어 지원에 초점을 맞추고 있으며, 사용자 정의 텍스트 및 레이블에 대한 로컬라이제이션을 지원한다고 한다.
pnpm i vue3-apexcharts
참고로 이 라브러리는 main.ts에 import하여 app.use를 하지 않아도 된다. => 왜냐하면 vue3-apexcharts 라이브러리가 내부적으로 필요한 등록 작업을 처리하기 때문이다.
그래서 사용하고 싶은 해당 컴포넌트에서 import 해와서 바로 작성하면 된다. 나는 차트별로 컴포넌트화 하여 사용하고 싶어서 따로 분리하여 작성하였다.
우선 아래 예제는 차트(radial) 컴포넌트이다.
<template>
<div>
<VueApexCharts width="500" type="radialBar" :options="chartOptions" :series="props.data!" />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import VueApexCharts from 'vue3-apexcharts'
const props = defineProps({
data: Array<Number>
})
const chartOptions = ref({
chart: {
height: 350,
type: 'radialBar'
},
plotOptions: {
radialBar: {
hollow: {
size: '70%'
}
}
},
labels: ['Cricket']
})
</script>
예를 들어 현재 내가 만들고자 하는 곳에는 series로 값이 배열 형태이고 내부 값은 Number인 것을 확인할 수 있다.
그래서 defineProps을 위와같이 작성하면 된다.
위 VueApexCharts 컴포넌트에서 type에 따라 차트 모양이 바뀐다. options는 말 그대로 해당 차트에 옵션을 부여하고 series는 해당 차트의 값을 넣어주면된다.
<template>
<main>
<BarChart :data="[70]"/>
</main>
</template>
<script setup lang="ts">
import BarChart from "@/components/charts/BarChart.vue";
</script>