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

vue3-charts 라이브러리를 이용하여 line + bar 차트를 만들어 보려고 한다. 화면 개발을 하다 보면 통계를 나타내는 화면을 만들어야 하는 상황이 종종 생기는데, 처음 마주한다면 어려움이 있겠지만 차트 개발은 한두 번 해봤다면 어렵지 않게 만들 수 있다. 지난번 글에서 만들어봤던 line 유형의 차트와 bar 유형의 차트를 오늘은 한 번에 생성하는 방법에 대해서 정리해 보려고 한다.

 

 

---

Line + Bar 차트 사용 사례

보통 Line 차트와 Bar 차트를 사용하는 경우가 다양하게 있는데, 어떤 경우에 사용하는지 정리해 보았다.

1. 데이터 비교
여러 다양한 데이터 집한 간의 비교를 할 때 사용할 수 있다. 예를 들어, 시간에 따른 매출량과 이익을 함께 표시하여 매출과 이익 간의 관계를 시각적으로 비교할 수 있다.

2. 트렌드 분석
Line 차트는 데이터의 추세를 나타내는 데 유용하며, Bar 차트는 특정 시점의 값을 보여주는 데 유용하다. 따라서 트렌드를 분석하고 특정 시점의 변화를 시각화하는 데 효과적이다.

3. 상세 및 요약 데이터
Line + Bar 차트를 사용하면 여러 지표를 한 번에 비교할 수 있다. 예를 들어, 매출과 이익뿐만 아니라 고객 수나 주문량과 같은 다른 지표도 함께 비교할 수 있다.

4. 다차원 데이터 시각화
Line + Bar 차트는 데이터를 비교하고 분석하는 데 다양한 관점을 제공하여 유용하게 활용될 수 있다.

이 밖에도 다양한 환경에서 Line + Bar 차트를 활용하여 시각화할 수 있다.

---

소스 코드

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

소스 코드를 보시게 되면 series부분에서 line series 정보와 bar series 정보를 배열로 같이 넣어주시면 된다.

그러면 series 유형별로 각각 차트를 생성하게 된다.

추가로 name 부분과 상단의 legend 부분을 추가를 해줬는데, 해당 부분은 상단의 legend 부분을 표시하게 된다.

1. Vue template
- <vue-echarts> 컴포넌트를 사용하여 차트를 표시하고 option 속성을 통해 차트의 옵션을 설정한다.

2. 차트 옵션
- legend : 범례를 정의
- xAxis : 차트의 X축에 대한 속성을 정의 (해당 코드에서는 요일을 사용)
- yAxis : 차트의 Y축에 대한 속성을 정의
- series : 배열을 사용하여 차트의 시리즈를 정의. 각 시리즈는 name, data, type을 포함한다.

 

line + bar 차트

위와 같이 상단 부분을 보시면 Echart Line, Echart Bar 기준으로 legend가 생성된다.

색상 설정은 따로 설정해주지 않으면 echart 내에서 내부적으로 기본 색상을 설정을 해주게 된다.

 

---

* 소스 코드 (series 설정에서 color 속성만 추가)

// bar 유형 데이터 정의
series: [
  {
    name      : 'Echart Line' ,   // legend
    data      : lineData      ,   // data
    type      : 'line'        ,   // line 유형
    color     : '#ff8585'     ,   // 색상
  },
  {
    name      : 'Echart Bar'  ,   // legend
    data      : barData       ,   // data
    type      : 'bar'         ,   // bar 유형
    color     : '#bdbdff'     ,   // 색상
  }
]

 

series 설정에서 color 속성만 임의로 설정하였다.

 

line + bar 차트 속성 변경 화면

실행을 하게 되면 위의 보기와 같이 색상을 임의로 변경할 수 있게 된다.

 

---

마무리

Apache echarts 라이브러리를 생각보다 잘 만든 차트 라이브러리라고 생각한다. 처음 사용할 때에는 성능적인 문제나 기술적인 문제를 의심했지만, 1년 넘게 사용하면서 불편하다는 점을 크게 못 느끼고 사용해오고 있다. 너무 복잡한 시각화 차트만 아니라면 통계 화면을 개발하는데 활용하기 좋은 라이브러리라고 생각한다.

오늘은 Line과 Bar 차트를 합쳐서 차트를 만들어 보았는데, 생각보다 구현은 간단하고, 코딩도 복잡하지 않다는 것을 알 수 있었다. 

현재 개인 프로젝트를 진행하면서 서비스를 시작했는데, 이 서비스 화면 역시 Apache Echarts 라이브러리를 활용해서 개발을 하고 있다.

(http://econoflow.co.kr)
앞으로 정리해 볼 차트 역시 위의 서비스에 계속해서 적용해 볼 예정이다.
 

 

* Apache Echarts 오픈 소스 공식 사이트

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

Apache ECharts