[Vue3] vue3-echarts - line 차트, smooth 차트, area 차트 만들기

오늘은 vue3-echarts 라이브러리를 활용하여 line, smooth, area 유형의 차트를 만들어 보려고 한다. UI 개발을 하면서 데이터 시각화하는 경우는 생각보다 많고, 시각화하는 유형도 생각한 것보다 다양하게 구현을 하게 된다. 기본 형태인 line 차트를 기반으로 해서 옵션을 조금만 추가해서 smooth, area 형태의 차트로도 구현이 가능하며, 옵션 하나로 훨씬 더 다양한 차트 구현이 가능하다.

 

---

smooth 옵션 차트

smooth는 line 그래프의 부드러운 정도를 조절하는 옵션이다. 이 옵션을 활성화하면 선이 더 부드럽게 그려지며, 일반적으로 이 옵션은 데이터 포인트 사이를 부드럽게 연결하여 시각적으로 더 부드러운 곡선을 형성하게 된다. 선이 꺾이는 부분이 더 부드럽게 연결된다.

활용 사례

1. 시계열 데이텨의 경향 분석
시계열 데이터의 경우, 부드러운 선은 데이터의 전반적인 경향을 파악하는 데 도움이 될 수 있다. 예를 들어, 일일 주가 지수의 변화를 보여주는 그래프에서 선이 부드럽게 그려진다면, 주식 시장의 장기적인 추세를 파악할 수 있다.

2. 센서 데이터 시각화
센서 데이터의 경우에는 종종 노이즈가 많이 발생하기 때문에 smooth를 이용하여 선을 부드럽게 하면 노이즈를 감소시키고 데이터의 실제 변화를 더 잘 표현할 수 있다. 특히 온도 센서 데이터에서 smooth 옵션을 사용하기에 적합하다.

3. 실시간 데이터 시각화
smooth 옵션을 이용하여 실시간 데이터의 변화를 조금 더 자연스럽게 표현할 수 있다. 주식 시장에서 실시간으로 주가를 추적하는 경우, 실시간 데이터를 부드럽게 연결하면 빠르게 변화하는 데이터를 더 쉽게 이해할 수 있다.

4. 애니메이션 효과
데이터의 변화를 시각적으로 전달할 때 부드러운 애니메이션 효과를 적용하려는 경우에 smooth 옵션을 활용할 수 있다.

---

Area 차트

Area 차트는 line 차트와 유사하지만, line 아래 영역을 채워 시각적으로 강조할 때 주로 사용되는 차트 유형이다. 데이터의 특정 영역을 강조하거나, 시계열 데이터의 경향을 보여줄 때 사용된다.

활용 사례

1. 데이터 범위
시계열 데이터에서 특정 기간의 데이터 범위를 강조하거나, 특정 이벤트가 발생한 기간을 시각적으로 표시할 때 유용하다.

2. 누적 데이터
여러 데이터 시리즈를 누적하여 표현할 때에 Area 차트를 주로 활용한다. 각 데이터 시리즈가 차례로 아래 쌓여 시각적으로 누적되는 모습을 나타낼 수 있다. 이는 전체 데이터의 추이뿐만 아니라 각 데이터 시리즈가 전체에 어떻게 기여하는지를 보여줄 때 효과적이다. 
예를 들어, 연간 매출을 월별로 분류하여 누적 막대 차트로 표시할 때 사용할 수 있다.

3. 비교 및 추이 분석
Area 차트는 여러 데이터 시리즈 간의 비교와 추이 분석에도 유용하게 사용된다. 다른 데이터 시리즈 간의 영역을 채워 시각적으로 차이점을 보여줌으로써 데이터 간의 상대적인 크기와 변화를 빠르게 이해할 수 있다. 예를 들어, 여러 제품의 판매량을 시계열로 비교할 때 사용할 수 있다.

4. 확률 분포 시각화
확률 분포를 시각화할 때에도 Area 차트를 주로 활용한다. 확률 밀도 함수를 시각적으로 표현하여 각 값의 상대적인 확률을 보여줄 수 있다.

이렇게 Area 차트는 데이터의 분포와 관계를 시각적으로 이해하기 쉽게 도와주는 차트 유형이다. 데이터의 특성과 목적을 잘 파악하여 데이터를 효과적으로 시각화할 수 있다.

그런데 나는 생각보다 Area 형태의 차트는 많이 해보진 않았던 것 같다. 

---

line 차트 예제 소스 코드

먼저 비교를 위해 line 차트의 구현 예제 소스 코드다.
코드를 보기 전에 라이브러리가 없는 경우 먼저 install을 진행한다.

* 라이브러리 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 환경에서 vue3-echarts 라이브러리를 활용하여 생성한 예제 소스 코드다. 

template
- <vue-echarts> 컴포넌트를 사용하여 Echarts 그래프를 생성
- :option="options"를 통해서 그리고자 하는 차트의 옵션을 설정
- style 속성을 통해서 차트의 너비와 높이를 조정

script
- vue3-echarts 컴포넌트 import
- setup() 실행시 state 객체를 통해 차트의 옵션을 관리
- onMounted 훅에서 차트를 생성하기 위한 데이터를 세팅 및 옵션을 설정
   ㄴ X축과 Y축의 데이터 및 유형을 정의, 시리즈 설정


아래는 소스 코드를 실행한 결과 화면이다.

* line 차트 

line 차트

간단하게 line 차트가 생성된다.
그럼 이제 위의 기본 line 차트에서 옵션을 하나씩 수정해 가며 smooth 옵션 차트와 area 차트로 바꿔보도록 하자.

 

---

 

smooth 차트 예제 소스 코드

* 소스 코드 

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

 

 

위에서 정리한 line 차트 예제 소스 코드에서 series 부분만 위와 같이 변경하였다.

type : 기존에는 'line'으로 설정되어 일반적인 라인 형태의 그래프를 나타내었으며, smooth 옵션을 추가하면서 부드러운 라인 차트로 변경된다.
smooth : 해당 옵션을 true로 설정하여 위에서 설정한 line 속성이 부드럽게 표현된다.

* smooth line 차트

smooth line 차트

이렇게 설정 하나를 추가해서 딱딱한 느낌의 line 차트가 부드럽게 변경되었다. 추가한 옵션은 'smooth:true' 하나 추가했을 뿐인데 생각보다 시각적인 효과의 변화는 큰 것 같다.


다음은 Area 형태의 차트를 정리해보자.

---

Area 차트 예제 소스 코드

* 소스 코드

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

위의 코드도 smooth와 동일하게 series의 설정만 조금 변경을 하면 간단하게 Area 형태의 차트로 바꿔줄 수 있다.

type : smooth와 동일하게 line 설정을 유지한다.
AreaStyle : Area 차트의 특성 중 하나로, 라인 아래 영역을 채우는 스타일을 정의한다. 빈 객체 {}로 설정하면 기본 스타일로 적용이 된다.

* Area line 차트

area line 차트

간단하게 area line 차트까지 구현이 되었다.

 

다음은 마지막으로 smooth 차트와 Area 차트를 하나로 합쳐서 한 번에 적용해보도록 하자.

---

 

Smooth + Area 차트 예제 소스 코드

* 소스 코드

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

최종적으로 위의 설정은 smooth 설정과 area 설정을 합친 코드다. 
위에서 정리했던 옵션을 한번에 합쳐서 생성해 주면 끝이다.

그러면 결과는 부드러운 라인 형태와 Area 형태를 합친 차트가 생성된다.

* Area + smooth line 차트

Area + smooth line 차트

---

smooth 옵션과 area 차트 사용 시 주의사항

항상 내용을 정리한 후에 정리한 기능 또는 기술에 대해 주의사항을 정리한다. 기능 구현을 하는 것도 중요하지만 해당 기능을 적재적소에 맞게 사용하고 구현하는 것이 더 중요하기 때문에 주의사항을 눈여겨볼 필요가 있다고 생각한다.

1. 데이터의 표현
- smooth 차트와 Area 차트는 데이터의 부드러운 표현과 영역 강조를 위해 사용되는 차트이지만, 가끔은 이러한 효과가 데이터를 왜곡시킬 수 있다. 특히 데이터가 실제로 부드럽게 변하지 않는 경우에는 smooth 옵션을 사용하는 것이 적절하지 않을 수 있다.
- 데이터가 실제로 부드럽게 변하지 않거나, 데이터 간의 연속성이 없는 경우에는 smooth 차트를 사용하지 않는 것이 좋다.

2. 시각적 분석의 목적
- smooth 차트와 Area 차트를 사용하는 가장 중요한 이유는 데이터의 추세를 부드럽게 표현하고 영역을 강조하는 것이다. 따라서 시각적 분석의 목적에 따라 이러한 차트를 사용해야 한다.
- 데이터의 정확성보다는 추세를 파악하거나 영역을 강조하는 데 더 중점을 둘 때, smooth 차트와 area 차트를 사용하는 것이 적합하다.

3. 색상과 투명도 설정
- Area 차트를 사용할 때는 영역의 색상과 투명도를 적절하게 설정해야 한다. 너무 진한 색상이나 높은 투명도는 데이터를 보기 어렵게 만들 수 있다. 따라서 시각적으로 명확하고 쉽게 이해할 수 있는 색상과 투명도를 선택하는 것이 중요하다.

4. 데이터의 크기와 밀도
- 데이터의 크기와 밀도에 따라 smooth 차트와 Area 차트의 사용이 적합한지 결정해야 한다. 데이터가 매우 촘촘하고 밀도가 높을 경우에는 차트가 너무 복잡해질 수 있기 때문에 크기와 밀도에 맞는 시각화 방법을 선택해야 한다.

5. 주변 환경과 배경색
- 차트를 표시하는 환경과 배경색을 고려하여 적절한 차트 스타일을 선택해야 한다. 특히 밝은 배경에는 명확하게 보이는 색상을 선택하는 것이 중요하다. 만약 차트를 인쇄하거나 어두운 배경에 표시해야 하는 경우에는 적절한 색상과 스타일을 선택해야 한다.

---

마무리

오늘은 vue3-echarts 라이브러리를 사용해서 간단하게 line 차트를 변경해 보았다. 설정 방법은 매우 간단했으며, 이와 같이 옵션 몇 개만 알고 있어도 훨씬 다양한 형태의 차트 구현이 가능하다. 현재 진행하고 있는 개인 프로젝트에서 활용할 수 있는 데이터가 있다면 꼭 적용해서 반영해 봐야겠다. 

Vue 개발을 시작한 지는 오래되지 않았지만 생각보다 Vue의 생태계는 괜찮다고 생각한다. 지원하는 라이브러리도 많고, 데이터 시각화를 할 수 있는 라이브러리도 다양했으며, 여러 가지 사용해 보면서 특히 vue3-echarts 라이브러리가 매우 매력적인 라이브러리라고 생각하여 이렇게 블로그에 글로 하나씩 정리하게 되었다. vue3-echarts에 대해서 정리하는 글들이 어느 정도 정리되면 또 다른 라이브러리를 찾아서 하나씩 소개해봐야겠다. 


아래 경로는 현재 vue3-echarts를 이용하여 개발한 경제지표 시각화 서비스다. 아직 미흡하지만 계속해서 기능을 확장하고 안정화를 시켜봐야겠다.
Economy Flow 사이트
https://econoflow.co.kr 

Economy FLow

 

 

Apache Echarts 공식 사이트

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

Apache ECharts