apache echarts3 [Vue3] vue3-echarts - line 차트, smooth 차트, area 차트 만들기 오늘은 vue3-echarts 라이브러리를 활용하여 line, smooth, area 유형의 차트를 만들어 보려고 한다. UI 개발을 하면서 데이터 시각화하는 경우는 생각보다 많고, 시각화하는 유형도 생각한 것보다 다양하게 구현을 하게 된다. 기본 형태인 line 차트를 기반으로 해서 옵션을 조금만 추가해서 smooth, area 형태의 차트로도 구현이 가능하며, 옵션 하나로 훨씬 더 다양한 차트 구현이 가능하다. smooth 옵션 차트 smooth는 line 그래프의 부드러운 정도를 조절하는 옵션이다. 이 옵션을 활성화하면 선이 더 부드럽게 그려지며, 일반적으로 이 옵션은 데이터 포인트 사이를 부드럽게 연결하여 시각적으로 더 부드러운 곡선을 형성하게 된다. 선이 꺾이는 부분이 더 부드럽게 연결된다. 활.. 2024. 4. 16. [Vue3] vue3-echarts - bar 차트 만들기 오늘은 vue에서 vue3-echarts 라이브러리를 활용한 bar 형태 차트를 만들어 보려고 한다. 차트 유형중 기본이 되는 bar 형태의 차트는 다양한 시각화 차트에서 많이 사용한다. 나 또한 다양한 환경에서 bar 형태의 차트를 많이 사용해 왔고, 최근에는 apache echarts 라이브러리를 이용해서 개발을 하고 있다. Apache에서 제공되는 라이브러리는 오픈 소스로서 생산성이 매우 좋다고 생각한다. 오늘 소개하는 시각화 차트를 그리는 Echarts 또한 개발이 쉽고 생산성이 좋은 것 같다. https://echarts.apache.org/en/index.html Apache ECharts ECharts: A Declarative Framework for Rapid Construction of.. 2024. 4. 15. [vue3] vue3-echarts scatter 차트 (dot) 만들기! 오늘은 vue3-echarts를 이용하여 scatter 차트, 또는 dot 차트라고 하는 유형의 차트에 대해서 정리해 보려고 한다. scatter 차트는 데이터의 분포도를 나타낼 때에 유용한 데이터 시각화 차트다. 실제 업무에서는 scatter 차트를 사용했던 경험은 많이 없지만 최근 개발을 진행하면서 scatter 유형의 차트를 구현했던 경험이 있기 때문에 이렇게 글을 정리하게 되었다. Scatter 차트의 개념 Scatter 차트는 데이터를 산점도 형태로 표현하는 차트다. 이 차트는 두 변수 간의 관계를 시각적으로 파악할 수 있도록 도와주며, 각각의 데이터 포인트는 데이터 집합에서 하나의 점으로 나타난다. Scatter 차트는 일반적으로 X축과 Y축에 각각의 변수를 할당하고, 데이터 포인트를 해당 .. 2022. 12. 23. 이전 1 다음 728x90
