[Vue3] vue3-echarts - bar 차트 만들기

오늘은 vue에서 vue3-echarts 라이브러리를 활용한 bar 형태 차트를 만들어 보려고 한다. 차트 유형중 기본이 되는 bar 형태의 차트는 다양한 시각화 차트에서 많이 사용한다. 나 또한 다양한 환경에서 bar 형태의 차트를 많이 사용해 왔고, 최근에는 apache echarts 라이브러리를 이용해서 개발을 하고 있다. 
Apache에서 제공되는 라이브러리는 오픈 소스로서 생산성이 매우 좋다고 생각한다. 오늘 소개하는 시각화 차트를 그리는 Echarts 또한 개발이 쉽고 생산성이 좋은 것 같다.

https://echarts.apache.org/en/index.html

Apache ECharts

 

---

Bar 차트 활용 사례

Bar 형태의 차트는 다양한 데이터 시각화에 활용되며, 여러 산업 분야와 업무 영역에서 많이 사용되고 있다. 

1. 금융 분야
- 주식 시장에서 각 주식의 일일 거래량을 시각화하여 시장의 움직임을 파악
- 투자자들의 포트폴리오를 관리하기 위해 자산 클래스 (주식, 채권, 부동산 등)의 비중을 보여준다.
- 금융 기관이나 투자 기업에서 연간 수익률, 자산 규모, 이익 등을 분기별로 비교하여 경영 현황을 확인

2. 판매 및 유통
- 제품 카테고리별로 매출을 비교하여 가장 수익성이 높은 제품을 식별한다.
- 지역 또는 매장 간 매출을 비교하여 성과를 측정하고 향후 전략을 수립한다.
- 프로모션 효과를 분석하여 효과적인 마케팅 전략을 결정한다.

3. 생상 및 운영
- 생산 라인 또는 공정 간 생산량을 비교하여 생산 효율성을 평가한다.
- 재고 관리를 위해 재고 수준을 시각적으로 표시하여 재고 부족 또는 과잉을 방지한다.
- 운영 지표를 추적하여 생산량, 불량률, 가동률 등을 모니터링하고 개선점을 파악한다.

4. 인사 및 조직
- 부서별 또는 직급별 인원 수를 시각화하여 조직 구조를 파악하고 조직 개편을 수립한다.
- 인사 성과 지표를 분석하여 각 직원의 업적을 평가하고 보상을 결정한다.
- 인력 조달 및 퇴직률을 추적하여 인력 계획을 수립하고 인재 유치 전략을 실행한다.

5. 교육 및 학문
- 학생 성적을 과목별로 비교하여 학업 성취도를 평가하고 개인 맞춤형 교육 계획을 수립한다.
- 학교 또는 학과 간 학생 수나 학업 성과를 비교하여 학교 운영의 효율성을 평가한다.
- 교육 프로그램의 효과를 평가하기 위해 학생들의 학습 형태나 성취도를 분석한다.


이렇게 다양한 산업 분야와 업무 환경에서 Bar 형태의 데이터 시각화 차트를 활용하고 있다. 

---

예제 소스 코드

1. 라이브러리 install

> npm install vue3-echarts

2. 실행 소스 코드

<template>
  <div>
    <vue-echarts 
      :option="options" 
      style="width:70%;height:600px;"
    />
  </div>
</template>

<script>
// install한 라이브러리 import
import { VueEcharts } from 'vue3-echarts'
import { reactive, toRefs, onMounted } from 'vue'

export default {
  components : {
    VueEcharts
  },

  setup() {
    const state = reactive({
      options : {}
    })

    onMounted(() => {
      // 데이터는 요일 기준으로 random하게 생성
      const xData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      const yData = xData.map(() => {
        return parseInt(Math.random() * 100)
      })

      state.options = {
      	// X축 정의
        xAxis : {
          type : 'category',
          data : xData
        },
        // Y축 정의
        yAxis: {
          type: 'value'
        },
        // bar 유형 데이터 정의
        series: [
          {
            data: yData,
            type: 'bar'
          }
        ]
      }
    })

    return {
      ...toRefs(state),
    }
  }
}
</script>

위의 소스코드는 vue3-echarts 라이브러리를 사용하여 간단한 bar 차트를 생성한 예제다. 

템플릿 VueEcharts 컴포넌트
<vue-echarts> 컴포넌트를 사용하여 ECharts 차트를 렌더링 하고, :option 속성을 사용하여 차트의 옵션을 전달, style 속성을 사용하여 차트의 크기를 설정한다.

차트 옵션 설정
xAxis와 yAxis를 사용하여 X축과 Y축을 정의하며, X축은 요일, Y축은 해당 요일의 데이터를 나타낸다.

위의 코드를 실행하게 되면 아래와 같이 bar 차트가 생성된다.

* x축 기준 bar 차트

x축 기준 bar 차트 화면

 

다음은 예제는 위의 소스 코드에서 x축 기준으로 생성했던 bar 차트를 y축 기준으로 변경하여 y축 bar로 변경하는 예제 코드다.

3. 실행 소스 코드

<template>
  <div>
    <vue-echarts 
      :option="options" 
      style="width:70%;height:600px;"
    />
  </div>
</template>

<script>
// install한 라이브러리 import
import { VueEcharts } from 'vue3-echarts'
import { reactive, toRefs, onMounted } from 'vue'

export default {
  components : {
    VueEcharts
  },

  setup() {
    const state = reactive({
      options : {}
    })

    onMounted(() => {
      // 데이터는 요일 기준으로 random하게 생성
      const xData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      const yData = xData.map(() => {
        return parseInt(Math.random() * 100)
      })

      state.options = {
      	// X축 정의 (Y축 설정 정보로 변경)
        xAxis : {
          type: 'value'
        },
        // Y축 정의 (X축 설정 정보로 변경)
        yAxis: {
          type : 'category',
          data : xData
        },
        // bar 유형 데이터 정의
        series: [
          {
            data: yData,
            type: 'bar'
          }
        ]
      }
    })

    return {
      ...toRefs(state),
    }
  }
}
</script>

위의 소스코드 주석 내용과 같이 xAxis 설정 정보와 yAxis 설정 정보만 서로 변경

 

* 변경 전 x축 bar

// X축 정의
xAxis : {
  type : 'category',
  data : xData
},
// Y축 정의
yAxis: {
  type: 'value'
},

* 변경 후 y축 bar

// X축 정의 (Y축 설정 정보로 변경)
xAxis : {
  type: 'value'
},
// Y축 정의 (X축 설정 정보로 변경)
yAxis: {
  type : 'category',
  data : xData
},

변경된 코드 실행

 

 

* y축 기준 bar 차트

y축 기준 bar 차트 화면

 

이렇게 간단하게 vue3-echarts 라이브러리를 활용하여 x축 기준의 bar 차트와 y축 기준의 차트를 생성해 봤다.

---

Bar 차트 활용 시 주의사항

vue3-echarts 라이브러리를 사용하여 bar 형태의 차트를 활용할 때 주의사항을 정리해 보았다.

1. 데이터 유형 확인
bar 차트를 사용할 때 데이터의 유형을 확인해야 한다. 수치 데이터인지, 범주형인지에 따라 차트의 표현 방식이 달라질 수 있다.

2. 차트 디자인과 가독성
bar 차트의 디자인과 가독성을 고려해야 한다. 색상, 레이아웃, 축의 라벨 등을 조절하여 사용자가 정보를 쉽게 파악할 수 있도록 해야 한다.

3. 데이터의 양과 처리 방법
대용량 데이터를 다룰 때에는 성능 문제가 발생할 수 있으므로, 이 경우 데이터를 적절히 처리하고, 필요한 경우 렌더링 옵션을 최적화하여 성능을 향상해 주는 것이 좋다.

4. 반응형 디자인
Vue 컴포넌트를 사용하여 차트를 구현할 때에는 반응형 디자인을 고려하는 것이 좋다. 차트의 크기가 동적으로 변경될 수 있으므로, 이를 고려하여 차트의 크기와 레이아웃을 조정해야 한다.

5. 라이브러리 버전 관리
vue3-echarts와 관련된 라이브러리의 버전을 주기적으로 확인하고 업데이트해야 한다. 새로운 버전은 기능 개선과 버그 수정을 포함할 수 있으며, 최신 버전을 사용함으로써 더 나은 사용자 경험을 제공할 수 있다.

---

마무리

오늘은 vue3-echarts 라이브러리를 활용하여 bar 차트에 대한 내용과 예제 소스코드를 정리해 보았다. 그리고 활용 사례까지 정리해 봤는데, 생각보다 다양한 환경에서 bar 형태의 차트를 사용한다는 것을 알 수 있었다. 그 밖에도 더 많은 환경에서 사용하겠지만 오늘 정리한 부분만 해도 활용할 수 있는 곳이 이렇게 많다는 것을 알 수 있었다. 
개인적인 생각으로는 앞으로는 세상에 더 많은 데이터가 생겨날 것이고, 그 방대한 양의 데이터를 텍스트로만 보려면 무리가 있다. 그리고 그 많은 데이터를 시각화하는 것 또한 흔한 일이 될 것이다. 개발자로서 데이터 시각화하는 것을 꾸준히 준비해 두는 것은 좋다고 생각한다.


아래 웹 사이트는 내가 개인적으로 경제 지표 데이터를 수집해서 vue3-echarts 라이브러리를 활용해 만든 서비스이다. 참고 삼아 확인해 보면 좋을 것 같다. (생각보다 많은 양의 데이터를 기반으로 차트를 제공하고 있다)

https://econoflow.co.kr 

Economy FLow