@82chart/vue

82chart Vue 3 컴포넌트 — 한국 사이트를 위한 무료(MIT) 차트. 만·억 단위, 카드 스킨, 확대, 내보내기, 키보드 접근. Vue 3 component for 82chart, the free (MIT) chart component: line, area, bar, pie, donut, scatter, radar, gauge, population pyramid, heatmap, calendar heatmap, treemap, funnel and waterfall.

npm i @82chart/core @82chart/vue

<script setup lang="ts">
import { ref } from 'vue';
import { Chart82 } from '@82chart/vue';
import '@82chart/core/styles.css';

const data = ref({ labels: ['1월', '2월', '3월'], series: [{ name: '매출', data: [2200, 2900, 2600] }] });
const chartRef = ref(); // chartRef.value.chart is the instance
</script>

<template>
  <Chart82 ref="chartRef" type="bar" :data="data" :options="{ title: '월별 매출', unit: '만원' }" @click="p => console.log(p.x, p.y)" />
</template>

Props: type, data, options (every other chart option), theme. Events: click(point), ready(chart). data and options are watched deeply, so pushing a value into a reactive array redraws the chart. Created in onMounted (SSR-safe; in Nuxt wrap it in <ClientOnly>).

Docs: https://82chart.com/docs/vue/

License

MIT © 2nd Korea (세컨드코리아)