Vue3 기초 예제 - Bar Charts(Vue-ECharts)

Vue-Echarts 라이브러리를 사용하여 Bar Charts를 생성하는 기초 예제

*Vue3 기초 예제 - 날짜 검색(v-calendar)에 이어서 진행

*API 관련 설명 생략

*자세한 설명 생략

 

 

▷ Vue-Echarts 설치

*vue-cli를 통해 Project 생성 후 진행

*설치방법 생략

*Vue3 기초 예제 - Pie Charts(Vue-ECharts) 참고

 

 

▷ 기초 예제 - Bar Charts

 

- main.js

*Vue-ECharts 라이브러리 등록

*BarChart, GridComponent 추가

/** Vue */
import { createApp } from 'vue'
import App from './App.vue'

/** Router */
import { router } from '@/module/router/MenuNav.js'
import { createPinia } from 'pinia'

/**Prime : 테이블 라이브러리 */
import PrimeVue from 'primevue/config';
import 'primevue/resources/themes/lara-light-teal/theme.css'

/** ECharts : 챠트 라이브러리 */
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart, BarChart } from 'echarts/charts'
import { TooltipComponent, LegendComponent, GridComponent } from 'echarts/components';
import { use } from 'echarts/core'
use([CanvasRenderer, PieChart, BarChart, TooltipComponent, LegendComponent, GridComponent])

/** Vcalendar : 달력 라이브러리 */
import VCalendar from 'v-calendar';
import 'v-calendar/style.css';

/** Vue Appicaiotn Setting */
createApp(App)
    /** 모듈 사용 등록 */
    .use(router)
    .use(createPinia())

    /** 라이브러리 사용 등록 */
    .use(PrimeVue)
    .use(VCalendar, {})


    /** 연결 */
    .mount('#app')

 

- A01C01.vue

*전체 코드

<template>
    <div>
        <h1>🌼 꽃한송이</h1><br />
    </div>
    <div>
        <div>
            <h6 style="color: red;">*원하는 조회기간을 선택하여 검색해주세요</h6>
            <VDatePicker v-model.range="inputDate" mode="date" style="width: 50%;" /><br /><br />
            <button @click="getData();" style="width: 50%; font-size: medium;">🔍조회</button>
        </div><br /><br />
        <div v-if="state">
            <h5> [ 연령대 비중 ]</h5>
            <h6 style="color: red;">*연령대 박스를 선택하여 필터링할 수 있습니다.</h6>
            <v-chart class="chart" :option="ageRatio" />
        </div><br /><br />
        <div v-if="state">
            <h5> [ 성별 비중 ]</h5>
            <h6 style="color: red;">*성별 박스를 선택하여 필터링할 수 있습니다.</h6>
            <v-chart class="chart" :option="genderRatio" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useLoginStore } from '@/module/store/LoginStore.js'
import { API_LIST, sendPost } from '@/module/AxiosModule.js'
import * as cmmUtil from "@/module/CmmUtil.js";

import VChart from 'vue-echarts'


onMounted(() => {
    /** 로그인 체크 */
    useLoginStore().checkUser()
})


const state = ref(false)
const ageList = [ 0, 10, 20, 30, 40, 50, 60, 70, 80, 90 ];

const inputDate = ref({ start: new Date(), end: new Date() });

/** Pie Chart 생성 */
const ageRatio = ref({
    legend: {
        top: "top",
    },
    tooltip: {
        trigger: "item",
        formatter: "{b} : {c} ({d}%)",
    },
    series: [
        {
            name: "AgeRatio",
            type: "pie",
            radius: [40, 150],
            roseType: "area",
            itemStyle: {
                borderRadius: 8
            },
            data: []
        },
    ]
});

/** Bar Chart 생성 */
const genderRatio = ref({
    legend: {
        top: "top",
    },
    tooltip: {
        trigger: "item",
        formatter: "{a} : {c}",
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [
        {
            name: "MALE",
            type: 'bar',
            stack: 'x',
            data: []
        },
        {
            name: "FEMALE",
            type: 'bar',
            stack: 'x',
            data: []
        },
        {
            name: "UNCLASSIFIED",
            type: 'bar',
            stack: 'x',
            data: []
        }
    ]
});

/** 연령대/성별 비중 데이터 생성 */
async function getData() {
    /* 요청 값 설정 */
    const REQ_DATA = {
        "areaCd": [
            "A01" // 공간코드 고정
        ],
        "contentsCd": [
            "C01" // 컨텐츠코드 고정
        ],
        "ages": ageList,
        "startDate": cmmUtil.getFormatDate(inputDate.value.start),
        "endDate": cmmUtil.getFormatDate(inputDate.value.end)
    }

    /* 방문객 스캔 특정 기간 통계 조회 요청 */
    const resVO = await sendPost(API_LIST["BHS-SSC-1001"], REQ_DATA)
    
    if (resVO.resultCode == "0000") {

        const ageRatioList = [] // 연령대 비중 데이터 리스트

        const maleRatioList = [] // 성별(MALE) 비중 데이터 리스트
        const femaleRatioList = [] // 성별(FEMALE) 비중 데이터 리스트
        const unclassifiedRatioList = [] // 성별(UNCLASSIFIED) 비중 데이터 리스트

        /* Pie Chart Data + Bar Chart Data*/
        for (const ages of ageList) {
            
            const ageRatioResult = { name: ages, value: 0 }

            const maleRatioResult = { value: 0 } 
            const femaleRatioResult = { value: 0 } 
            const unclassifiedRatioResult = { value: 0 }

            for (const data of resVO.result) {
                if (ages == data.visitorAges) {
                    
                    ageRatioResult.value += data.visitorAgesCnt

                    maleRatioResult.value         += data.visitorMlCnt
                    femaleRatioResult.value       += data.visitorFmlCnt
                    unclassifiedRatioResult.value += data.visitorUncCnt
                }
            }
            ageRatioList.push(ageRatioResult)

            maleRatioList.push(maleRatioResult)
            femaleRatioList.push(femaleRatioResult)
            unclassifiedRatioList.push(unclassifiedRatioResult)
        }

        ageRatio.value.series[0].data = ageRatioList

        genderRatio.value.xAxis.data = ageList
        genderRatio.value.series[0].data = maleRatioList // MALE
        genderRatio.value.series[1].data = femaleRatioList // FEMALE
        genderRatio.value.series[2].data = unclassifiedRatioList // UNCLASSIFIED

        state.value = true
    } else {
        state.value = false
    }
}
</script>

 

 

▷ 결과 확인

 

① 초기화면, 기간 설정 후 조회 클릭

 

② 조회 결과

 

 

▷ 관련 글

Vue3 기초 예제 - 날짜 검색(v-calendar)

Vue3 기초 예제 프로젝트 정리