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

오늘은 vue3-echarts 라이브러리를 활용해서 multi bar 차트를 만들어 보고 어떤 차트인지 정리해 보려고 한다. UI 개발을 하면서 데이터 시각화 하는 상황은 많이 있으며, 그중 기본이 되는 bar 형태의 차트는 정말 많이 사용된다. 하나의 series로 구성된 차트도 많이 사용하지만 여러 개의 series를 한 번에 그리며 multi 형태로 시각화하여 데이터를 비교 분석하는 경우도 많이 있다. 이런 경우에 많이 사용되는 유형이 multi bar 차트다. 

---

multi bar 차트의 활용 사례

multi bar 차트를 만들어 보기 전에 어떤 상황에서 주로 활용되는지 사례를 정리해 보았다.

다중 범주 비교
여러 범주 또는 그룹 간의 데이터를 비교해야 할 때 multi bar 차트를 사용한다. 예를 들어 여러 제품 카테고리, 지역, 시간 단위 등을 비교할 때 multi bar 차트는 각 범주의 데이터를 명확하게 시각화할 수 있다.

데이터 변화 추적
시간이 지남에 따라 데이터의 변화를 추적하고 싶을 때 multi bar 차트가 유용하다. 연도별, 월별 또는 주별로 데이터를 나타내어 시계열 데이터의 추이를 쉽게 파악할 수 있다.

상대적 비교
다양한 범주 간의 상대적 비교를 하고 싶을 때 multi bar 차트를 사용한다. 각 범주의 데이터가 서로 다른 색상으로 구분되어 시각적으로 비교할 수 있다.

데이터의 패턴 파악
데이터의 패턴이나 트렌드를 파악하고 싶을 때 multi bar 차트가 유용하다. 데이터가 시간, 공간 또는 다른 범주에 따라 어떻게 분포되어 있는지를 한눈에 알아볼 수 있다.

추세 분석
시간에 따른 데이터의 변화를 추적하고 분석할 때 multi bar 차트가 유용하다. 연도, 분기, 월 등 시간 단위로 데이터를 그룹화하여 추세를 파악하고 예측하는 데 활용할 수 있다.


multi bar 차트는 다양한 데이터를 한 번에 비교하고 추세를 분석하며, 상대적 비교와 데이터의 분포를 확인하며 이상치를 탐지하는 데 유용한 차트라고 볼 수 있다.

---

multi bar 차트 예제 소스 코드
vue3-echarts 라이브러리 install

> npm install vue3-echarts

vue3-echarts 라이브러리 가 없다면 먼저 install을 진행한다.

전체 소스 코드

<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(() => {
      // legend 목록
      const legendList = ['VUE', 'REACT', 'ANGULAR', 'JQUERY', 'SVELTE', 'BACKBONE']
      // 데이터는 요일 기준으로 random하게 생성
      const xData = ['2015', '2016', '2017', '2018', '2019', '2020', '2021']
      // 차트 데이터
      const chartData = [
        { data : [120, 132, 142, 170, 180, 230, 250] },
        { data : [125, 140, 150, 160, 220, 280, 350] },
        { data : [140, 162, 160, 177, 180, 215, 220] },
        { data : [220, 252, 262, 283, 290, 330, 320] },
        { data : [87, 99, 103, 105, 110, 130, 150] },
        { data : [90, 97, 112, 120, 130, 133, 131] },
      ]
      // series 데이터 목록
      const series = []
      // legend 기준 series 데이터 생성
      legendList.forEach((x, i) => {
        series.push({
          name    : x,
          type    : 'bar',
          data    : chartData[i].data
        })
      })

      /**
       * Chart options 정의
       * 
       */
      state.options = {
        // legend 정의
        legend : {
          data  : legendList
        },
        // X축 정의
        xAxis : {
          type : 'category',
          data : xData
        },
        // Y축 정의
        yAxis: {
          type: 'value'
        },
        // bar 유형 데이터 정의
        series: series,
        // tooltip 정의
        tooltip : {
          trigger: 'axis'
        }
      }
    })

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

위의 소스 코드는 vue3-echarts 라이브러리를 활용해서 multi bar 차트를 생성하는 예제다.
구현을 위한 데이터는 임의로 만든 데이터이다.

legendList : 각 막대의 범례(legend) 목록을 xData에는 x축에 표시될 연도 데이터를, chartData에는 각 범례별 막대 데이터를 설정한다.
series : 각 범례에 대한 막대 데이터를 추가한다.
options : 범례, x축, y축, 막대 데이터, 툴팁 등의 차트 옵션을 설정한다.

위의 코드를 실행하게 되면 연도별로 여러 범례에 대한 막대 그래프가 생성된다.

series type 'bar' 설정 변경

// legend 기준 series 데이터 생성
legendList.forEach((x, i) => {
    series.push({
      name    : x,
      type    : 'bar',
      data    : chartData[i].data
    })
})

데이터는 legendList 배열을 기준으로 series를 생성한다.

 

'bar' 설정으로 변경 후 실행을 하게 되면

위의 결과 화면과 같이 범례에 해당하는 데이터 series 별로 multi bar 차트가 생성되었다.

---

tooltip 옵션

multi bar 차트를 그렸다면 차트의 비교와 분석에 생산성을 높여줄 수 있는 기능들을 추가해 주는 것이 좋다. 그중에서 기본적으로 많이 사용하는 tooltip 옵션을 정리해 보았다. tooltip을 사용했을 때와 사용하지 않았을 때의 차이는 천지 차이다. 만약 사용하지 않는다면 사용자가 데이터의 실제 수치를 확인하기 위해 x축, y축을 확인해 가면서 파악해야 하고, 정확성이 떨어지지만, tooltip 옵션 하나를 추가해 준다면 아주 간단하게 bar 별로 실제 값을 파악하는 데 아주 용이하다.

위의 소스 코드에서 tooltip 옵션만 수정

 

// tooltip 정의
tooltip : {
  trigger: 'axis',
  axisPointer : {
    type : 'shadow'
  }
}

소스 코드에서 axisPointer 설정을 주면서 type 값을 shadow로 변경하였다.

trigger : 'axis' 설정은 툴팁이 데이터 축(axis)과 관련된 모든 series 데이터를 보여준다. 마우스를 차트의 데이터 포인트 위로 올리게 되면 해당 포인트의 정보를 표시한다.

axisPointer 설정은 툴팁이 차트의 어느 부분을 가리키는지를 나타내는 부분이다. shadow로 설정되어 있어 그림자를 표시한다. 이 경우에는 그림자는 series의 막대 그래프를 가리킨다.

tooltip shadow 설정했을 때의 화면

마우스 오버를 하면 선택 영역의 bar 기준으로 그림자 영역이 생기고 tooltip이 생성된다. 기본 설정된 tooltip 옵션을 그대로 사용한다면 bar 형태의 차트와 잘 어울리지 않는 tooltip이 생성되지만, 옵션을 조금만 수정해 준다면 위와 같이 훨씬 더 보기 좋게 바꿔줄 수 있다.

이 외에도 multi bar 차트를 생성할 때 주로 많이 사용하는 옵션들이 있는데, 어떤 옵션들이 있는지 간단하게 정리해 보았다.

---

stack 옵션

stack 옵션은 multi bar 차트에서 누적이 되는 형태의 차트로 데이터를 시각화하는 옵션이다. 해당 옵션은 막대 차트나 선 차트에서 여러 series를 겹쳐서 표시할 때 사용된다.

// 시리즈 설정
series: [
  {
      name: 'Series 1',
      type: 'bar',
      data: seriesData1,
      stack: 'stackGroup' // stack 옵션 설정
  },
]

위의 코드는 일반 bar series 옵션에 stack을 추가하는 방법이다.

stack 옵션을 series를 그룹화하는 역할을 한다. stack 옵션을 하용하여 여러 series를 같은 그룹으로 묶을 수 있으며, 이렇게 함으로써 각 series의 데이터가 서로 겹쳐지지 않고 쌓여서 표시된다.

위의 코드에서는 stack: 'stackGroup' 으로 설정하였으며, 여기서 'stackGroup'은 그룹의 이름을 지정하고 이 이름은 동일한 그룹으로 지정된 모든 series에 동일해야 한다.

---

barGap 옵션

barGap 옵션은 막대 간의 간격을 설정하는 데 사용된다. 이 옵션을 통해 막대 간의 간격을 조절하여 시각적으로 데이터를 더욱 명확하게 표현할 수 있다.

// 시리즈 설정
series: [
  {
      name: 'Series 1',
      type: 'bar',
      data: seriesData1,
      barGap: '10%', // 막대 간격을 10%로 설정
  },
]

위의 코드에서 barGap: '10%'로 설정하면 막대 간의 간격이 막대 너비의 10%만큼 생성된다.
옵션값은 보통 퍼센트(%)로 표현되며, 막대의 너비에 대한 상대적인 값을 나타낸다. 값이 클수록 막대 간의 간격이 넓어지고, 값이 작을수록 간격이 좁아진다.

---

barWidth 옵션

barWidth 옵션은 막대의 너비를 설정하는 옵션이다. 이 옵션을 사용하면 막대의 너비를 조절하여 시각적인 효과를 적용할 수 있다.
barGap 옵션과 헷갈릴 수 있는데, barGap은 막대 간의 간격이고, barWidth는 막대의 너비다.

// 시리즈 설정
series: [
  {
    name: 'Series 1',
    type: 'bar',
    data: seriesData1,
    barWidth: 20 // 막대의 너비를 20px로 설정
  },
]

위의 코드는 barWidth 옵션을 사용하는 예제다. series에 barWidth 옵션을 설정할 수 있으며, 옵션값은 보통 픽셀(px) 단위로 표현된다. 막대의 실제 너비를 나타내며, 너비가 크면 두껍고, 작으면 얇은 막대가 생성된다.

barWidth: 20으로 설정하면 막대의 너비가 20px가 된다. 이때 주의할 점은 모든 막대가 동일한 너비를 갖게 되는 것이며, 이 값이 각 막대의 전체 너비를 결정하는 것이 아니다.

---

multi bar 차트 생성 시 주의사항

multi bar 차트는 다양한 데이터를 시각화하고 비교 분석하는데 매우 유용하지만, 다양한 상황에 따라서 주의해야 할 부분이 있다.

데이터의 일관성
각 series의 데이터 배열의 길이는 동일해야 한다. 다른 길이의 데이터 배열을 사용하면 차트가 제대로 작동하지  않을 수 있다.

옵션 설정
차트의 옵션을 정확하게 설정해야 한다. 각 series의 이름, 타입, 데이터 등을 정확하게 설정하여 차트가 올바르게 렌더링 되도록 해야 한다.

색상 선택
각 series에 대해 다른 색상을 선택하여 시각적으로 잘 구분되도록 해야 한다. 중복된 색상을 사용하면 시리즈 간의 구분이 어려워질 수 있다.

레이아웃
차트의 레이아웃을 적절히 조절하여 정보를 명확하게 전달할 수 있도록 해야 한다. 축의 범위, 레이블 위치 등을 조절하여 가독성을 향상시킬 수 있다.

성능
데이터가 많을 경우에는 차트의 성능이 저하될 수 있다. 이를 방지하기 위해 필요한 경우 데이터를 집계하거나 시각적 요소를 최적화해야 한다.

---

마무리

오늘은 multi bar 차트에 대한 내용을 정리해 보았다. 차트의 구현은 간단하고 쉽지만, 상황에 따른 주의사항을 고려해 보는 것이 중요하고, 동일한 데이터라도 옵션을 어떻게 주느냐에 따라서 차트의 생산성이 달라질 수 있다는 것을 알 수 있었다. 오늘은 bar를 기준으로 정리해 보았는데, bar 뿐만 아니라, line, area, scatter 등 다양한 유형의 차트들도 multi로 구현이 가능하며, 유형마다 특성이 다르기 때문에 차트별로 공부하고 학습할 때에는 이 차트가 어디에 활용될 수 있는지, 어떤 옵션들을 설정해서 생산성을 올려줄 수 있는지를 같이 알아두는 것이 좋다.

 

* Apache Echarts 공식 사이트

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

Apache ECharts