[vue3] vue3-echarts 라인, 바 차트 만들기

 

 

안녕하세요!

 

오늘은 vue3-echarts 라이브러리를 활용하여 라인 차트와 바 차트를 조합한 응용형 시각화 차트를 구현해보려고 합니다. 이전 포스팅에서는 라인 차트와 바 차트를 각각 구현해 보았는데, 이번에는 이 두 가지를 유기적으로 결합하여 더 다양한 시각화를 표현하는 차트를 만들어보고자 합니다. 자바스크립트와 vue3-echarts의 기능을 최대한 활용하여 효과적인 차트를 구현해 볼 예정입니다. 

 

그럼 바로 시작해 보겠습니다.

 

---

vue3-echarts

vue3-echarts는 Vue.js 3 프레임워크에서 사용할 수 있는 시각화 차트 라이브러리입니다. 이 라이브러리는 ECharts라는 JavaScript 시각화 라이브러리를 Vue.js 3에 쉽게 통합할 수 있도록 도와줍니다.

ECharts는 다양한 유형의 차트를 지원하며, 라인 차트, 바 차트, 파이 차트 등 다양한 형태의 데이터 시각화를 할 수 있습니다. 또한, 다양한 옵션을 설정하여 차트의 스타일과 레이아웃을 자유롭게 조정할 수 있어 사용자 정의가 용이합니다.

vue3-echarts 라이브러리를 활용하면 Vue.js 3 컴포넌트와 함께 간단하게 차트를 생성하고 데이터를 시각화할 수 있으며, Vue.js의 반응성 기능과 함께 차트를 동적으로 업데이트하는 것도 가능합니다. 이를 통해 웹 애플리케이션에서 효과적인 데이터 시각화를 구현할 수 있습니다.

 

---

Line 차트와 Bar 차트를 함께 응용하면 좋은 경우

vue3-echarts를 이용하여 바차트와 라인차트를 합쳐서 구현하는 것은 다음과 같은 장점이 있습니다:

1. 다양한 데이터 시각화

바차트와 라인차트를 함께 사용하면 다양한 형태의 데이터를 시각화할 수 있습니다. 바차트는 데이터의 크기를 비교하고자 할 때, 라인차트는 시간에 따른 변화를 표현할 때 유용합니다. 두 차트를 합쳐 사용함으로써 데이터를 보다 다양한 방법으로 시각화할 수 있습니다.

2. 두 차트의 상관 관계 표현

바차트와 라인차트를 함께 사용하면 두 데이터 간의 상관관계를 시각적으로 표현할 수 있습니다. 예를 들어 바차트는 매출액, 라인차트는 판매량을 나타내면서, 매출액과 판매량의 상관관계를 한눈에 파악할 수 있습니다.

3. 더 많은 정보 전달

두 차트를 하나로 합치면 단일 차트에서 더 많은 정보를 전달할 수 있습니다. 사용자는 하나의 차트에서 여러 데이터를 비교하고 추세를 파악할 수 있어서 정보 전달이 효율적입니다.

4. 시각적 효과

바차트와 라인차트를 함께 사용하면 시각적으로 풍부한 효과를 줄 수 있습니다. 차트의 색상과 형태를 다양하게 조합하여 눈에 띄는 시각적 효과를 구현할 수 있습니다.

5. 자세한 분석

라인차트를 사용하여 시간에 따른 변화를 표현하면 특정 기간 동안의 데이터 변화를 자세히 분석할 수 있습니다. 바차트와 라인차트를 합쳐 사용함으로써 더 정확한 데이터 분석이 가능합니다.

 

이러한 이점들로 인해 바차트와 라인차트를 합쳐서 구현하는 것은 데이터 시각화의 다양성과 효율성을 높일 수 있습니다.

 

 

---

Bar, Line 차트 예제 소스 코드

<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']
      // line 데이터
      const lineData = xData.map(() => {
        return parseInt(Math.random() * 100)
      })
      // bar 데이터
      const barData = xData.map(() => {
        return parseInt(Math.random() * 100)
      })

      /**
       * Chart options 정의
       * 
       */
      state.options = {
        // legend 정의
        legend : {
          data  : ['Echart Line', 'Echart Bar']
        },
        // X축 정의
        xAxis : {
          type : 'category',
          data : xData
        },
        // Y축 정의
        yAxis: {
          type: 'value'
        },
        // bar 유형 데이터 정의
        series: [
          {
            name      : 'Echart Line' ,   // legend
            data      : lineData      ,   // data
            type      : 'line'        ,   // line 유형
          },
          {
            name      : 'Echart Bar'  ,   // legend
            data      : barData       ,   // data
            type      : 'bar'         ,   // bar 유형
          }
        ]
      }
    })

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

위의 소스 코드는 Vue.js 3와 vue3-echarts 라이브러리를 이용하여 라인 차트와 바 차트를 하나의 차트로 합쳐 응용한 예제입니다.

템플릿 영역
<vue-echarts> 컴포넌트를 사용하여 차트를 표시합니다. :option 속성을 통해 차트의 설정 옵션을 전달하고, style 속성을 통해 차트의 크기를 조정합니다.

스크립트 영역
    - vue3-echarts 라이브러리에서 VueEcharts 컴포넌트를 import하여 사용합니다.
    - onMounted 라이프사이클 훅을 사용하여 컴포넌트가 마운트된 후에 차트 데이터를 생성하고 설정 옵션을 정의합니다.
    - 라인 차트와 바 차트에 사용할 데이터를 xData, lineData, barData 배열로 생성합니다.
    - 차트의 설정 옵션인 state.options에 필요한 정보들을 정의합니다. legend은 범례, xAxis와 yAxis는 X축과 Y축에 대한 설정을

       의미합니다.

    - series 배열에 라인 차트와 바 차트의 데이터와 유형을 설정하여 차트를 생성합니다.

 

이렇게 구현된 코드는 라인 차트와 바 차트가 하나의 차트로 합쳐져서 표시되며, 랜덤하게 생성된 데이터를 기반으로 간단한 응용 차트를 보여줍니다.

 

 

실행 결과

 

 

---

최종 정리

 

오늘은 vue3-echarts 라이브러리를 활용하여 바차트와 라인차트를 조합한 예제를 구현해 보았습니다. 앞서 정리한 내용처럼 이 두 가지 유형의 차트를 함께 사용함으로써 시각적인 효과를 높이고 데이터 시각화의 다양성을 확장할 수 있습니다. 또한, 바차트와 라인차트를 합쳐 사용하면 데이터 간의 상관관계를 쉽게 파악하고 자세한 분석이 가능해집니다. 이를 통해 업무에서 많은 도움을 얻을 수 있습니다.

 

 

감사합니다!