문서 › 프레임워크와 서버

Vue

Vue 컴포넌트로 82chart 쓰기.

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

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

const data = {
  labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
  series: [{ name: '매출', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
};
const options = { title: '월별 매출', unit: '원' };
</script>

<template>
  <Chart82 type="bar" :data="data" :options="options" @click="(p) => console.log(p)" />
</template>

<Chart82 :type :data :options :theme @click @ready /> (Vue 3).
data 는 깊이 지켜보므로 배열 안 값을 바꿔도 다시 그립니다.
@ready 로 차트 인스턴스를 받아 toPNG() 같은 메서드를 부릅니다.
Nuxt 에서는 <ClientOnly> 로 감싸세요.