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

 

 

안녕하세요!

 

오늘은 Vue3에서 시각화 차트로 자주 활용되는 vue3-echarts 라이브러리를 활용한 라인 차트에 대해 정리해 보려고 합니다. 데이터를 시각화하고자 할 때 다양한 유형의 차트로 시각화를 할 수 있지만, 그중에서도 라인 차트는 기본 형태의 차트로서 다양한 환경에서 활용하기 좋습니다.

다양한 예제와 설명을 통해 vue3-echarts 라이브러리를 사용하여 라인 차트를 구현하는 방법을 자세히 알아보도록 하겠습니다.

---

vue3-echarts 라인 차트

Vue3-ECharts는 Vue.js와 ECharts를 통합하여 데이터 시각화를 위한 강력한 도구를 제공하는 라이브러리입니다. ECharts는 빠르고 강력한 차트 라이브러리로서 다양한 유형의 차트를 제공하며, Vue.js와 함께 사용하면 데이터 시각화를 쉽게 구현할 수 있습니다.

라인 차트는 Vue3-ECharts를 통해 아주 간단하게 구현할 수 있으며, 여러 개의 데이터 포인트를 선으로 연결하여 추세를 시각화하는 데 사용됩니다. 라인 차트는 시간에 따른 변화나 특정 데이터의 변화를 보여주는 데 적합하며, 시계열 데이터와 같은 데이터 시각화에 많이 활용됩니다.

라인 차트를 구현하려면 먼저 Vue3-ECharts 라이브러리를 설치하고 프로젝트에 등록해야 합니다. 그리고 차트에 표시할 데이터를 정의하고, ECharts의 옵션 객체를 사용하여 차트의 모양과 스타일을 설정합니다. 데이터와 옵션 객체를 Vue 컴포넌트에 바인딩하여 라인 차트를 렌더링할 수 있습니다.

 

라인 차트의 활용

라인 차트는 다양한 상황에서 데이터 시각화를 위해 활용할 수 있습니다.

 

1. 시계열 데이터 표현

라인 차트는 시간에 따른 데이터의 변화를 효과적으로 보여주기 위해 주로 사용됩니다.

주식 시세, 기후 변화, 판매 추이 등과 같이 시간에 따른 데이터의 변화를 시각화할 때 유용합니다.

 

2. 추세 파악

라인 차트는 데이터의 추세를 파악하는 데에 용이합니다.

데이터의 상승 또는 하락 추세를 빠르게 파악하고 비교 분석할 수 있습니다.

3. 다중 데이터 비교

라인 차트는 다수의 데이터를 하나의 차트에 표현하는데 적합합니다.

여러 개의 라인을 비교하여 패턴과 관계를 파악할 수 있습니다.

4. 데이터 변화 감지

데이터의 변화를 신속하게 파악하기 위해 라인 차트를 사용할 수 있습니다.

특정 지점에서 데이터가 급격히 변하는 것을 쉽게 발견할 수 있습니다.

5. 분포 비교

여러 개의 라인 차트를 겹쳐서 사용하면 데이터의 분포를 비교하고 차이를 확인하는데 도움이 됩니다.

6. 데이터 예측

라인 차트를 통해 과거 데이터의 추세를 파악하고 예측하는 데에 활용할 수 있습니다.

이를 통해 미래 데이터에 대한 예측과 시나리오를 구축할 수 있습니다.

 

이외에도 라인 차트는 다양한 분야에서 데이터 시각화에 활용되며, 사용자들에게 직관적인 정보 제공과 데이터 분석을 도와줍니다.

---

라인 차트 예제

 

라이브러리 install

npm install vue3-echarts

예제 소스 코드

<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: 'line' // line 유형
          }
        ]
      }
    })

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

위의 소스 코드는 Vue3 프로젝트에서 Vue-ECharts 라이브러리를 사용하여 라인 차트를 구현하는 예제입니다. 

1. 라인 차트를 표시하기 위한 Vue-ECharts 컴포넌트를 <vue-echarts> 태그로 등록하고, options 객체를 :option 속성으로 바인딩하여 차트의 옵션을 설정합니다.

2. VueEcharts를 import 하여 Vue 컴포넌트에 등록합니다.

reactive 함수를 사용하여 상태 객체 state를 정의하고, toRefs 함수를 사용하여 상태 객체를 reactive 하게 변환합니다.

3. Vue 3에서 사용되는 setup() 함수를 활용하여 초기 데이터와 라인 차트의 옵션을 설정합니다.

onMounted 훅을 사용하여 컴포넌트가 마운트된 후 데이터를 생성하고, 옵션 객체를 설정합니다.

4. 요일을 나타내는 xData 배열과 해당 요일에 대응하는 랜덤한 값을 생성하여 yData 배열에 저장합니다.

5. state.options 객체에 X축과 Y축, 그리고 라인 차트 데이터에 대한 옵션을 정의합니다.

X축은 요일을 나타내며, Y축은 값의 범위를 나타냅니다. 라인 차트 데이터는 series 속성에 설정되어 있으며, type이 'line'으로 설정되어 라인 차트를 생성하도록 지정합니다.

6. toRefs를 사용하여 reactive한 상태 객체인 state를 템플릿에서 사용할 수 있도록 반환합니다.

 

이렇게 구현된 코드는 Vue-ECharts 라이브러리를 활용하여 라인 차트를 그리는 예제로, 데이터 시각화를 위해 프로젝트에서 활용할 수 있습니다. 차트를 그릴 때 데이터를 동적으로 생성하거나 다양한 옵션을 설정하여 원하는 형태로 시각화할 수 있습니다.

 

 

실행 결과

 

---

smooth 라인 차트 예제

// bar 유형 데이터 정의
series: [
  {
    data    : yData   ,
    type    : 'line'  , // line 유형
    smooth  : true    , // smooth 설정
  }
]

위의 소스 코드는 series 속성을 수정하여 smooth한 라인 차트로 변경한 소스 코드입니다.

 

위 코드에서 smooth 설정 부분에서 smooth: true를 추가하여 라인 차트에 smooth 효과를 적용합니다. smooth 속성은 라인 차트의 데이터를 부드럽게 연결하여 곡선으로 표현하는 옵션입니다. 이렇게 설정하면 데이터 간의 이동이 부드럽게 보이는 더 부드러운 라인 차트가 생성됩니다.

 

실행 결과

 

 

---

area 라인 차트

// bar 유형 데이터 정의
series: [
  {
    data      : yData   ,
    type      : 'line'  , // line 유형
    areaStyle : {}      , // area 기본 스타일 적용
  }
]

위의 소스 코드는 areaStyle 속성을 추가하여 area 형태의 라인 차트를 그리는 소스 코드입니다.

 

areaStyle 속성은 라인 차트의 영역을 색상으로 채우는 스타일을 설정하는 옵션입니다. 기본적으로 areaStyle에 빈 객체 {}를 설정하여 기본 스타일을 적용했습니다. 이렇게 하면 라인 차트의 아래 영역이 색상으로 채워지게 됩니다.

라인 차트의 아래 영역을 색상으로 채우는 것으로 인해 데이터의 흐름이 시각적으로 더 잘 드러나며, 각 데이터 포인트 사이의 영역이 색상으로 구분되어 더욱 직관적인 시각화를 제공합니다.

만약 원하는 특정 스타일을 적용하고 싶다면 areaStyle에 해당 스타일을 설정하면 됩니다. 이를 통해 area 형태의 라인 차트를 더 다양하게 표현할 수 있습니다.

 

 

실행 결과

 

 

---

smooth + area 라인 차트

// bar 유형 데이터 정의
series: [
  {
    data      : yData   ,
    type      : 'line'  , // line 유형
    areaStyle : {}      , // area 기본 스타일 적용
    smooth    : true    , // smooth 설정
  }
]

위의 소스 코드는 smooth 설정과 areaStyle 설정을 동시에 줄 때의 예제 소스 코드입니다. 라인 차트는 부드럽게 그려지면서 아래 영역이 색상으로 채워지는 형태로 나타납니다.

 

smooth: true: 이 설정으로 라인 차트의 라인이 부드럽게 그려집니다. 데이터 포인트 사이를 부드럽게 연결하여 곡선 형태로 표현됩니다. 이로 인해 데이터의 흐름이 시각적으로 더 자연스럽게 보입니다.

areaStyle: {}: areaStyle에 빈 객체 {}를 설정하여 area 영역이 색상으로 채워지도록 합니다. 이렇게 하면 라인 아래 영역이 색상으로 채워져 시각적으로 더욱 직관적인 시각화를 제공합니다.

이 두 가지 설정을 동시에 사용하면 라인 차트가 부드럽게 그려지면서 아래 영역이 색상으로 채워지는 area 형태의 라인 차트가 생성됩니다. 이러한 형태의 라인 차트는 데이터의 추세를 시각적으로 파악하기에 더 편리하며, 시각적으로도 더욱 효과적인 시각화를 제공합니다.

 

 

실행 결과

 

 

---

최종 정리

 

오늘은 vue3-echarts 라이브러리를 활용하여 라인 차트를 구현하는 방법에 대해 알아보았습니다. 이 라이브러리를 사용하면 Vue.js 기반의 프로젝트에서 간편하게 라인 차트를 만들 수 있으며, 다양한 형태의 라인 차트를 손쉽게 구현할 수 있습니다.

라인 차트는 시계열 데이터를 시각화하거나 추세를 파악하는 데에 매우 유용하며, 다중 데이터 비교와 데이터의 변화 감지에도 효과적입니다. 또한, 데이터 분포 비교와 예측에도 활용할 수 있어 데이터 분석에 큰 도움이 됩니다.

뿐만 아니라 vue3-echarts 라이브러리의 다양한 옵션을 활용하면 부드러운 라인 차트나 영역형태의 라인 차트를 생성할 수 있습니다. 이를 통해 사용자들에게 직관적인 정보를 제공하고, 데이터 시각화를 통해 더욱 효과적인 데이터 분석을 할 수 있습니다.

그럼 다음 포스팅에도 이어서 vue3-echarts 라이브러리를 이용한 다양한 차트들을 정리해 보도록 하겠습니다.

 

감사합니다!