.gif&blockId=11b00c82-b138-8050-a58b-dcbceda2ef8f)
설명
차트 라이브러리
단점은 하나의 페이지에 여러 디자인에 차트가 들어갈 경우,
그때마다 ChartOption을 계속 data 쪽에 선언해주다 보니 코드가 길어짐
설치
npm install apexcharts --save
npm install vue-apexcharts --save // vue 이용시
JavaScript
복사
사용법
•
script
<script setup>
import Vue from 'vue'
import VueApexCharts from 'vue-apexcharts'
Vue.use(VueApexCharts)
Vue.component('apexchart', VueApexCharts)
options: {
xaxis: {
categories: ['1월', '2월', '3월', '4월', '5월', '6월'],
},
colors: ['#FEDD36'],
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
type: "vertical",
opacityFrom: 0.7,
opacityTo: 0.9,
colorStops: [
{offset: 0, color: "#fbc2eb", opacity: 1},
{offset: 100, color: "#a18cd1", opacity: 1}
]
}
}, plotOptions: {
bar: {columnWidth: '30%', endingShape: 'rounded', dataLabels: {position: 'top'}}
},
},
series: [{name: 'data', data: [1, 2, 3, 4, 5, 4]}]
</script>
JavaScript
복사
•
html
◦
type: 그래프 형태 선언
◦
option: 그래프의 디자인 옵션 값 연결
◦
series : 그래프의 데이터 값 연결
<template>
<div id="chart">
<p>Today's Chart</p>
<apexchart width="500" height="350" type="bar" :options="options" :series="series"/>
</div>
</template>
JavaScript
복사
•
css
<style>
#chart {
padding: 50px;
}
#chart p {
font-size: 30px;
font-weight: bold;
color: #737373;
margin: 0 0 50px 0;
}
</style>
JavaScript
복사
