ApexChart

설명

🔖 차트 라이브러리
단점은 하나의 페이지에 여러 디자인에 차트가 들어갈 경우,
그때마다 ChartOption을 계속 data 쪽에 선언해주다 보니 코드가 길어짐

설치

npm install apexcharts --save
npm install vue-apexcharts --save // vue 이용시

사용법

• 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>

• 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>

• css

<style>
    #chart {
        padding: 50px;
    }

    #chart p {
        font-size: 30px;
        font-weight: bold;
        color: #737373;
        margin: 0 0 50px 0;
    }
</style>

예시