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

오늘은 지난 시간에 이어 multi line 차트를 만들어 보려고 한다. 지난 글에서는 line + bar 차트를 생성해 봤는데, 오늘은 조금 더 응용해서 multi line 차트에 대한 내용을 주제로 정리해 보려고 한다. multi line 차트 역시 다양한 환경에서 활용하는데 매우 유용한 형태의 차트라고 볼 수 있다. 이름에서도 알 수 있듯이 multi line은 여러 개의 라인을 한 번에 그리는 차트다. 

 

---

multi line 차트의 개념

multi line 차트는 여러 개의 선 그래프가 하나의 차트 위에 표시되는 데이터 시각화 방법이다. 각 선은 서로 다른 데이터 시리즈를 나타내며, 시간 또는 다른 기준에 따른 값의 변화를 보여준다.

1. 다중 데이터 시리즈
multi line 차트는 여러 개의 데이터 시리즈를 표시한다. 각 데이터 시리즈는 독립적인 선으로 표시되며, 각각의 선은 서로 다른 데이터를 나타낸다.

2. 시간 또는 다른 기준에 따른 값의 변화
multi line 차트는 시간에 따른 값의 변화를 가장 흔하게 보여주며, 각 선은 시간의 경과에 따라 값이 어떻게 변화하는지 나타낸다. 또한 시간 외에 다른 기준에 따라서도 값의 변화를 보여줄 수 있다.

3. 비교와 추세 확인
multi lime 차트를 사용하면 여러 데이터 시리즈 간의 관계를 쉽게 비교할 수 있다. 또한 각 라인의 추세를 확인하여 데이터의 변화 패턴을 분석할 수 있다.

4. 다양한 용도 활용
multi lime 차트는 다양한 분야에서 활용된다. 예를 들어, 경제 지표 분석, 주식 시장 추세 분석, 센서 데이터 모니터링 등 다양한 분야에서 데이터의 변화를 시각적으로 파악하는 데 유용하다.

 

---

multi line 차트의 활용 사례

multi line 차트는 다중 시계열 데이터를 비교하거나 추세를 시각화하는 데 유용하다. 기본이 되는 차트 유형이며, 다양한 상황에서 활용되는 차트이다. 어떤 상황에 multi line 차트를 활용할 수 있는지 사례를 정리해 보았다.

주식 가격 추이 분석
주식 시장에서 여러 주식의 가격 변동을 비교 분석해야 한다. 이러한 경우 multi line 차트를 사용하면 여러 주식의 가격 추이를 한눈에 볼 수 있으며, 주식 간의 상관관계 및 패턴을 파악할 수 있다.

기후 데이터
기후 데이터는 여러 요인과 시간에 따라 변동한다. multi line 차트를 사용하여 온도, 강수량, 바람 속도 등의 다양한 기후 지표를 비교하고, 기후 변화의 추이를 분석할 수 있다.

웹 트래픽 모니터링
웹 사이트나 앱의 트래픽 데이터를 모니터링할 때, 다양한 지표의 변화를 추적해야 하는데, 이러한 경우에 multi line 차트를 사용하여 방문자 수, 페이지 뷰, 이탈률 등의 지표를 비교하고, 트래픽의 추이를 분석할 수 있다.

생산량 분석
제조업이나 생산 분야에서는 생산량, 생산 비용, 품질 지표 등을 추적하고 분석해야 한다. multi line 차트를 사용하여 여러 생산 지표를 비교하고, 생산량의 추이를 분석하여 생산 성과를 향상할 수 있다.


이 밖에도 인구 통계, 마케팅 캠페인 효과, 센서 데이터 등 다양한 환경에서 활용이 가능하며, 활용도가 높은 만큼 특정 데이터를 비교 분석하고 파악하는 데 유용한 차트다.

---

vue3-echarts 라이브러리 install

> npm install vue3-echarts

개발을 진행하는 프로젝트 폴더에서 vue3-echarts 라이브러리를 설치한다.

설치하기 전에 반드시 현재 환경에서 사용중인 vue의 버전을 확인하고 진행해야 한다. 그렇지 않으면 버전이 맞지 않아 차트를 생성해 보기도 전에 에러만 발생하고 처음부터 다시 시작해야 할 수도 있다.

---

소스 코드

<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.map((x, i) => {
        series.push({
          name    : x,
          type    : 'line',
          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
      }
    })

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

script 영역의 맨 첫번째 줄에 install 한 vue3-echarts를 import 시켜준다.

만약 vue3-echarts를 import 하였는데 브라우저에서 에러가 발생을 하거나 소스 코드상에서 에러가 발생을 한다면 정상적으로 install이 되지 않았으니 install을 먼저 확인해야 한다.

vue3-echarts install & import까지 정상적으로 완료 후,
소스 코드에서 임의로 legend, xData, chartData 데이터를 생성한다.
예제를 vue 기반으로 하다보니 비슷한 frontend 라이브러리들을 모아서 임의로 데이터를 만들어 보았다.
(실제 라이브러리의 통계와는 무관)

소스 코드를 계속 보시게 되면 legendList 기준으로 chartData정보를 순서대로 가져와 series 목록에 생성을 해주고 있다.
위의 소스 코드를 실행하게 되면..

이렇게 legend 기준별로 line 차트가 각각 그려지게 된다.

legend를 각각 누르게 되면 활성화/비활성화 처리가 되면서 차트상의 해당 line도 trigger 적용이 되어 활성화/비활성화 처리가 되는 기능이 있다.

 

---

tooltip 속성

차트를 생성하여 시각화를 했다면 차트의 기능 또한 필요한데, 그중에서 기본이 되는 tooltip에 대한 내용을 정리해보려고 한다. 라인의 포인트별로 수치가 어떻게 되는지 tooltip을 통해서 한눈에 파악할 수 있다면 사용자 입장에서 기능의 품질이 올라가는 효과가 있다.

* tooltip (툴팁) : 툴팁은 차트나 테이블 목록 등 부가적인 설명이 필요한 경우에 마우스 오버 / 아웃 이벤트를 통해서 작은 모달을 띄워 정보를 제공하는 기능을 의미

* 소스 코드

/**
 * 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'
    }
}

위의 소스 코드에서 tooltip 속성만 추가를 해줬다.
tooltip 내의 속성 'trigger: 'axis' 부분은 축을 기준으로 trigger를 적용하여 tooltip을 설정하는 속성인 것 같다.

tooltip 속성 적용 후

차트의 dot 부분 근처로 마우스를 옮기게 되면 위의 화면과 같이 해당 축의 각각의 정보들을 보여주게 된다.

마찬가지로 마우스를 옮기게되면 근처의 dot 부분의 정보들로 변경이 되고, 차트 밖으로 마우스가 아웃이 되면 tooltip은 사라지게 된다.

간단한 옵션을 추가를 해서 이렇게 시각적으로 퍼포먼스를 올려줄 수 있다.

---

multi line 차트 사용 시 주의사항

multi line 차트는 위에서 정리한 바와 같이 활용도가 매우 높으며, vue3-echarts 라이브러리를 활용하면 매우 간단하게 차트를 그릴 수 있다. 그리고 line이 하나가 아닌 multi 형태이기 때문에 차트 구현시 주의해야 할 부분들이 있다.

데이터 정제
어떤 유형의 차트든 데이터의 정제는 반드시 필요한 작업이다. 잘못된 값이 포함되거나 누락된 경우 차트가 정확하게 표시되지 않을 수 있다.

축의 범위 설정
축의 범위를 적절하게 설정해야 하며, 데이터의 최솟값과 최댓값을 고려하여 축의 범위를 설정해야 데이터를 더 잘 표현할 수 있다.

상호작용
사용자와의 상호작용을 고려하여 위에서 정리한 툴팁이나 축 범례 등을 추가해 주는 것이 좋다. 이를 통해 사용자가 차트를 더 쉽게 이해하고 탐색 및 분석할 있다.

성능 최적화
데이터가 많은 경우 성능이 저하될 수 있으므로, 필요한 경우 데이터를 적절히 요약하거나 샘플링하여 성능을 최적화해야 한다.

---

마무리

차트의 유형은 많고, 앞으로도 계속 다양한 형태의 차트가 개발되는 것 같다. 앞으로는 텍스트 형태의 데이터보다는 차트와 같이 시각화된 데이터로 서비스가 많아질 것이라고 생각하기 때문에 차트에 대한 개발을 꾸준히 해두는 것이 좋다고 생각한다. 그중에서 기본이 되는 line, bar, pie 등 위주로 다져놓으면 나중에 다양한 차트가 나오더라도 쉽게 응용해서 기술을 익힐 수 있을 것이라고 생각한다.

 

 

multi line 차트 역시 개인 서비스에 응용해서 차트를 만들어봤다. (https://econoflow.co.kr) 
해당 서비스는 경제 지표를 수집하여 시각화하는 서비스이며, 앞으로도 다양한 차트를 개발하고 공부하면서 서비스에 올려볼 생각이다.

 

 

* Apache Echarts 공식 사이트

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

Apache ECharts