본문 바로가기

vue apache echarts3

[Vue3] vue3-echarts - line + bar 차트 만들기 vue3-charts 라이브러리를 이용하여 line + bar 차트를 만들어 보려고 한다. 화면 개발을 하다 보면 통계를 나타내는 화면을 만들어야 하는 상황이 종종 생기는데, 처음 마주한다면 어려움이 있겠지만 차트 개발은 한두 번 해봤다면 어렵지 않게 만들 수 있다. 지난번 글에서 만들어봤던 line 유형의 차트와 bar 유형의 차트를 오늘은 한 번에 생성하는 방법에 대해서 정리해 보려고 한다. Line + Bar 차트 사용 사례 보통 Line 차트와 Bar 차트를 사용하는 경우가 다양하게 있는데, 어떤 경우에 사용하는지 정리해 보았다. 1. 데이터 비교 여러 다양한 데이터 집한 간의 비교를 할 때 사용할 수 있다. 예를 들어, 시간에 따른 매출량과 이익을 함께 표시하여 매출과 이익 간의 관계를 시각적으.. 2024. 4. 16.
[vue3] vue3-echarts multi bar 차트 만들기 오늘은 vue3-echarts 라이브러리를 활용해서 multi bar 차트를 만들어 보고 어떤 차트인지 정리해 보려고 한다. UI 개발을 하면서 데이터 시각화 하는 상황은 많이 있으며, 그중 기본이 되는 bar 형태의 차트는 정말 많이 사용된다. 하나의 series로 구성된 차트도 많이 사용하지만 여러 개의 series를 한 번에 그리며 multi 형태로 시각화하여 데이터를 비교 분석하는 경우도 많이 있다. 이런 경우에 많이 사용되는 유형이 multi bar 차트다. multi bar 차트의 활용 사례 multi bar 차트를 만들어 보기 전에 어떤 상황에서 주로 활용되는지 사례를 정리해 보았다. 다중 범주 비교 여러 범주 또는 그룹 간의 데이터를 비교해야 할 때 multi bar 차트를 사용한다. 예.. 2022. 12. 21.
[Vue3] vue3-echarts - multi line 차트 만들기 오늘은 지난 시간에 이어 multi line 차트를 만들어 보려고 한다. 지난 글에서는 line + bar 차트를 생성해 봤는데, 오늘은 조금 더 응용해서 multi line 차트에 대한 내용을 주제로 정리해 보려고 한다. multi line 차트 역시 다양한 환경에서 활용하는데 매우 유용한 형태의 차트라고 볼 수 있다. 이름에서도 알 수 있듯이 multi line은 여러 개의 라인을 한 번에 그리는 차트다. multi line 차트의 개념 multi line 차트는 여러 개의 선 그래프가 하나의 차트 위에 표시되는 데이터 시각화 방법이다. 각 선은 서로 다른 데이터 시리즈를 나타내며, 시간 또는 다른 기준에 따른 값의 변화를 보여준다. 1. 다중 데이터 시리즈 multi line 차트는 여러 개의 데이.. 2022. 12. 21.
728x90