APEXCHARTS 라이브러리 사용하기 (vue)

환경

운영체제 : window 10

RAM : 8.00 GB

프로세서 : Intel(R) Core(TM) i5-8265U CPU @ 1.60 GHz 1.80 GHz

 

---

프로젝트 만들기 (링크참조) hbsowo58.tistory.com/479

Vue 프로젝트 만들기

---

apexcharts & vue-apexcharts 설치 

 

npm install --save apexcharts
npm install --save vue-apexcharts

 

---

package.json

설치확인 & 버전확인

 

---

폴더구조

├─ README.md
├─ index.html
├─ bable.config.js
├─ package.json
└─ src
   ├─ main.js
   ├─ App.vue
   ├─ components
   │  ├─ HelloWorld.vue
   ├─ routes
   │  ├─ index.js
   ├─ views             
   │  ├─ About.vue
   │  └─ Home.vue
   ├─ store
   │  └─ index.js
   └─ assets
         └─ logo.png

---

src/main.js

 

import VueApexCharts from 'vue-apexcharts'
Vue.use(VueApexCharts)

Vue.component('apexchart', VueApexCharts)
// The app.use(VueApexCharts) will make <apexchart> component available everywhere.

8~12번라인 추가

---

기본 예제 bar차트 출력하기

src/components/HelloWorld.vue

기본예제 코드 삽입

<template>
	<div class="example">
		<apexcharts width="500" height="350" type="bar" :options="chartOptions" :series="series"/>
	</div>
</template>

<script>
import VueApexCharts from "vue-apexcharts";

export default {
	name: "Hellowolrd",
	components: {
		apexcharts: VueApexCharts,
	},
	data: function() {
		return {
			chartOptions: {
				chart: { id: "basic-bar"},
				xaxis: { categories: [1991,1992,1993,1994,1995,1996,1997,1998,]
        },
			},
			series: [ { name: "series-1", data: [30, 40, 45, 50, 49, 60, 70, 91]}],
		};
	},
};
</script>

 

화면 확인

 

예제 bar 출력

---

Line chart로 변경

 

src/components/HelloWorld.vue

 

3번라인 type속성 line으로 변경

변경확인하기

---

donut chart로 변경

 

src/components/HelloWorld.vue

 

type 및 data변경

<template>
	<div class="example">
		<apexchart width="380" type="donut" :options="options" :series="series"></apexchart>
	</div>
</template>

<script>
import VueApexCharts from "vue-apexcharts";

export default {
	name: "Hellowolrd",
	components: {
		apexcharts: VueApexCharts,
	},
data: function() {
    return {
      options: {},
      series: [44, 55, 41, 17, 15]
    }
  }
};
</script>

donut 차트 확인

 

기본 차트 출력을 마치고 다른 방법도 알아보도록 하겠습니다.