[vue] Echart bar 차트 만들기

Vue Echarts는 Vue.js에서 사용되는 데이터 시각화 차트 라이브러리이다. Vue.js 애플리케이션에서 쉽게 Echarts를 통합하고 사용할 수 있도록 도와주는 도구로, Vue 컴포넌트로 차트를 감싸고 데이터를 손쉽게 바인딩할 수 있다.

목차

오늘은 Vue에서 훌륭한 차트 라이브러리인 vue3-echart을 활용하여 bar 형태의 차트를 만들어보려고 합니다.
Vue를 개발하는 업무에서 여러 가지 차트 라이브러리를 사용해 봤지만, Apache에서 나온 오픈소스인 vue3-echart는 다양한 기능과 뛰어난 성능으로 좋은 결과를 만든 기억이 있습니다.
라이브러리 이름에 Vue3가 들어갔듯이, 이번 예제에는 Vue3 기반으로 만들어졌습니다.
그럼 예제를 통해서 하나씩 정리해 보도록 하겠습니다.

---

vue3-echarts 라이브러리 설치

npm을 통해서 vue3-echarts 라이브러리를 간단하게 추가하여 진행합니다.

npm install vue3-echarts

위와 같이 npm 명령어를 통해서 vue3-echarts 라이브러리를 install 합니다.

---

X축 기준 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']
      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 형태의 차트를 생성하는 예제입니다.

<template> 영역
Vue 컴포넌트의 템플릿 부분입니다. 해당 부분에서 'vue-echarts' 컴포넌트를 사용하여 차트를 표시하고 있습니다. options 설정으로 차트의 설정 정보를 전달하고 스타일을 지정하여 차트의 크기를 설정하고 있습니다.

<script> 영역
setup() 함수에서 Vue 3의 Composition API를 사용하여 컴포넌트의 상태와 로직을 정의합니다.
reactive() 함수를 사용하여 'state' 객체를 만들고, onMounted() 함수를 사용하여 컴포넌트가 마운트 될 때 실행되는 로직을 정의합니다.
'state.options' 설정을 통해 차트의 설정 정보를 정의하고 'xAxis'와 'yAxis'로 각각 X축과 Y축을 정의하고, 'series'로 차트 데이터를 정의합니다.
위의 예제에서는 'xData'와 'yData'를 사용하여 요일 기준으로 랜덤한 데이터를 생성하고 차트에 표시를 하고 있습니다.
toRefs() 함수를 사용하여 'state' 객체의 프로퍼티를 리액티브 래퍼런스로 반환합니다.
이렇게 하면 template 영역의 'vue-echarts' 컴포넌트와 'options' 객체가 연동되어 객체의 변경이 자동으로 화면에 반영됩니다.


X축 기준 bar 차트 실행 결과

위의 예제를 실행한 결과 화면입니다. 예제 내용대로 가장 기본적인 bar 형태의 차트가 요일별로 생성이 되었습니다.

---

Y축 기준 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']
      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 차트

예제 실행 결과 X축과 Y축의 기준이 바뀌면서 Y축 기준의 차트가 형성되었습니다.

---

마무리

오늘은 이렇게 vue3-echarts 라이브러리를 이용한 bar 형태의 차트를 정리해 봤습니다.

오늘 정리한 예제처럼 Vue 3 버전과 vue3-echarts 라이브러리를 결합하면, 데이터 시각화를 위한 다양한 옵션과 유용한 기능을 손쉽게 활용할 수 있습니다.

데이터를 시각적으로 표현하는 것은 현대 웹 개발에서 매우 중요한 요소이며, vue3-echarts는 이를 구현하는 데에 큰 도움이 됩니다.

이 라이브러리는 Apache에서 개발된 오픈소스로, 강력한 차트 기능과 사용자 친화적인 API를 제공하고 있습니다.

차트를 구현하는 과정에서 사용한 'options' 객체를 수정하고 데이터를 다르게 표현하면 다양한 형태의 차트를 만들 수 있습니다. Vue.js의 Composition API를 활용하여 코드를 작성하면 코드의 가독성과 유지보수성을 높일 수 있습니다!

앞으로도 Vue.js와 다양한 라이브러리를 활용하여 웹 애플리케이션을 개발하는 과정에서 자주 활용되는 유용한 기술들을 계속해서 정리하여 포스팅하도록 하겠습니다.