[vue] Vue3 + Apache Echarts - Pie 차트 만들기!

오늘은 Vue3 + Apache Echarts 라이브러리를 활용하여 Pie 차트를 만들고 정리해보려고 한다.
Pie 차트는 데이터를 비교하고 분석하는 데 유용한 차트이며, Apache Echarts 라이브러리를 사용한다면 간단하고 쉽게 구현할 수 있다.

---

Pie 차트의 개념과 특징

Pie 차트는 데이터를 원형으로 표현하여 각 데이터 항목의 상대적인 비율을 시각적으로 나타내는 그래프다. 


원형 표현
Pie 차트는 원형으로 데이터를 표현하는 그래프이며, 전체 데이터를 100%로 보고 각 항목의 비율을 나타낸다. 각 항목이 전체에 대한 상대적인 비율을 한눈에 파악할 수 있도록 도와준다.

비율 표시
Pie 차트는 각 항목의 비율을 각각의 부채꼴 형태로 표현한다. 각 부채꼴의 중심 각도는 해당 항목의 비율을 나타내며, 색상이나 라벨을 통해 항목을 식별할 수 있다.

비교
Pie 차트는 데이터 항목 간의 상대적인 크기를 시각적으로 비교하기 쉽게 해준다. 이를 통해 데이터 패턴이나 트렌드를 파악하고 인사이트를 도출하는 데 도움이 된다.

범주형 데이터 표현
Pie 차트는 주로 범주형 데이터를 표현하는 데 사용된다. 예를 들어, 제품 카테고리, 지역별 매출 비율, 사용자 성별 비율 등과 같은 범쥬형 데이터를 Pie 차트로 표현하여 시각적으로 이해하기 쉽게 할 수 있다.


Pie 차트는 Line, Bar, Scatter 등과 같은 다른 차트와는 다르게 시간에 따른 데이터의 변화를 나타내는 것이 아니라 100% 비율을 기준으로 비교를 하기 때문에 데이터를 비교하고 분석하는 방식이 조금 다르다고 볼 수 있다.


* vue3-echarts 라이브러리 install

> npm install vue3-echarts

 

---

Pie 차트 예제 소스 코드

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

      const pieData = []

      legendList.map((d) => {
          pieData.push({
              value : parseInt(Math.random() * 100),
              name  : d
          })
      })

      /**
       * Chart options 정의
       * 
       */
      state.options = {
        // legend 정의
        legend : {
          data  : legendList
        },
        // tooltip 정의
        tooltip : {
          trigger: 'item'
        }
      }

      state.options.series = {
        name    : 'Pie Chart',
        type    : 'pie',
        radius  : '50%',
        data    : pieData,
        emphasis: {
            itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
        }
    })

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

샘플 데이터는 legend 기준으로 랜덤 생성하였다.

options 정보
type : 'pie' // 차트 유형 Pie
radius : '50%' // 차트 반지름 50%
data : pieData // 위에서 생성한 샘플 데이터 목록


실행 결과

실행 결과는 Pie 형태로 잘 나온 것을 확인할 수 있다.
간단한 설정값으로 이렇게 간단하게 기본 Pie 차트를 만들었다.

---

Donut Pie 차트 예제 소스 코드

state.options.series = {
    name    : 'Donut Pie Chart',
    type    : 'pie',
    radius  : ['40%', '70%'],
    data    : pieData,
    emphasis: {
        itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
    }
}

options.series 정보만 살짝 변경을 하였다.

radius  : ['40%', '70%']
여기서 0번째 배열값은 데이터 영역의 지름 비율,
1번째 배열값은 안에 비워지게 될 영역의 지름 비율

그래서 아래와 같이 가운데 70% 만큼 비워지게 되어 donut 모양의 pie 차트를 형성하게 됐다.

비율값은 상황에 따라 변경을 해주면 되고, 0번, 1번 배열값이 합쳐서 100%가 되면 된다.

Donut Pie 차트는 일반 Pie 차트와 약간 다른 외형을 가진 차트다. 도넛 모양을 가진 차트라고 할 수 있는데, 시각적인 효과로 인해서 특정 부분을 강조하거나, 가운데 비워진 부분에 다른 정보나 레이블을 표시하는 등 차트를 보다 더 강화할 수 있는 차트다. 

---

Donut Pie Chart (border radius 추가)

state.options.series = {
    name        : 'Donut Pie Chart',
    type        : 'pie',
    radius      : ['35%', '65%'],
    itemStyle   : {
        borderRadius: 10,
        borderColor : '#fff',
        borderWidth : 2
    },
    data        : pieData,
    emphasis    : {
        itemStyle       : {
        shadowBlur      : 10,
        shadowOffsetX   : 0,
        shadowColor     : 'rgba(0, 0, 0, 0.5)'
        }
    }
  }

위의 코드도 마찬가지로 options.series 정보만 변경을 하였다.

위의 코드에서 보게 되면 itemStyle 속성을 추가하였다.
itemStyle   : {
        borderRadius: 10,
        borderColor : '#fff',
        borderWidth : 2
}
스타일 속성으로는 border 관련하여 설정하였는데 radius 값을 추가하여 데이터 영역의 모서리 부분을 조금 더 부드럽게 하여 입체감을 주었다.

위의 차트보다 훨씬 부드러운 느낌의 Pie 차트가 되었다.
데이터 시각화하는 시스템의 ui 특성에 맞춰 스타일을 주면 좋을 것 같다.

---

Donut Pie Chart (roseType 추가)

state.options.series = {
    name        : 'Donut Pie Chart',
    type        : 'pie',
    radius      : [50, 250],
    center      : ['50%', '50%'],
    roseType    : 'area',
    itemStyle   : {
        borderRadius: 10,
        borderColor : '#fff',
        borderWidth : 2
    },
    data        : pieData,
    emphasis    : {
        itemStyle       : {
        shadowBlur      : 10,
        shadowOffsetX   : 0,
        shadowColor     : 'rgba(0, 0, 0, 0.5)'
        }
    }
}

위의 코드에서 보게 되면
roseType    : 'area',
옵션만 추가를 하여 영역별로 크기가 다르게 형성할 수 있는 설정을 주었다.

데이터의 수치별로 지름 비율이 설정된 것 같다.
설정값에서도 유추할 수 있듯이 마치 장미 모양을 하고 있는 유형의 차트다. 해당 옵션을 사용하면 시각적인 효과와 데이터 유형별 강조가 훨씬 더 강력하게 할 수 있는 특징이 있다.

---

Pie 차트 사용 시 주의사항

Pie 차트를 시각화하기 전에 몇가지 주의사항을 확인해보는 것이 좋다. 구현 방법은 예제에서 본 것과 같이 간단하지만, 데이터의 특성와 환경에 따라서 Pie 차트가 적합한지, 성능상에 문제가 없는지 등 고려해보는 것이 중요하다.


너무 많은 범주
너무 많은 범주를 한 번에 표시하면 차트가 혼란스러워지고 가독성이 떨어질 수 있다. 가능한 경우 범주를 줄이거나 필요한 경우 데이터를 그룹화하여 Pie 차트를 보다 명확하게 표현할 수 있다.

범례의 중요성
Pie 차트에는 보통 범례가 포함되어 있다. 그러나 범례만으로는 데이터를 정확하게 이해하기 어려울 수 있다. 따라서 가능한 경우 데이터 항목의 레이블을 직접 차트에 표시하여 해석을 돕는 것이 좋다.

정확성
Pie 차트는 데이터의 상대적인 비율을 나타내는 데 사용되므로 정확성을 중시해야 한다. 데이터가 정확하게 표시되도록 확인하고, 필요한 경우 소수점을 반올림하거나 데이터를 확인하여 정확한 비율을 표시해야 한다.

비교 가능성
Pie 차트는 데이터 항목 간의 상대적 비교에 적합하다. 그러나 절대적인 값을 비교하기에는 적합하지 않을 수 있다. 데이터를 비교하기 전에 파이 차트가 어떤 종류의 비교에 적합한지 고려하는 것이 좋다.

너무 작은 비율
너무 작은 비율의 데이터는 Pie 차트에 표시하면 정보의 해석이 어려울 수 있다. 이러한 경우 그룹화하거나 다른 시각화 방법을 고려하는 것이 좋다.


위의 정리한 바와 같이 Pie 차트는 범주, 범례, 정확성, 비율 등 다양한 부분을 고려하여 생성하는 것이 중요하다. 당연한 내용이긴 하지만 막상 차트를 활용하여 시각화하다보면 이러한 부분들을 간과하고 사용하게 될 수 있다. 

 

---

마무리

오늘은 이렇게 Apache Echarts를 활용하여 다양한 Pie 차트를 만들어 봤다.  요즘에는 데이터도 워낙 다양해지고 표현할 시각화 데이터가 많다 보니 차트를 점점 많이 사용하게 되는 것 같다. 그만큼 차트의 유형도 다양해지고 학습하고 늘려야할 스킬이 늘어나는 것 같다. 
차트의 유형은 다양하지만 라이브러리 사용하는 방법만 익혀둔다면 차트의 유형 설정값, 데이터 가공, 기타 관련 설정만 다룰 수 있다면 손쉽게 다양한 차트를 다룰 수 있으니 Apache Echarts와 같은 라이브러리를 자주 활용해서 데이터 시각화하는 연습을 하는 것을 추천한다.




* Apache Echarts 공식 사이트
https://echarts.apache.org/en/index.html

Apache ECharts