Vue 3 Composition API로 ECharts 차트 컴포넌트 재사용성 높이기
데이터 시각화 프로젝트나 대시보드를 구축할 때, 유사한 형태의 차트를 반복해서 구현하는 것은 비효율적입니다. Vue 3의 Composition API와 ECharts를 결합하여 재사용 가능한 차트 컴포넌트를 캡슐화하는 방법을 살펴보겠습니다.
부모 컴포넌트에서의 활용
캡슐화된 차트 컴포넌트를 부모 컴포넌트에서 호출할 때는 필요한 데이터와 스타일 속성을 Props로 전달합니다. ...
7월 9일 17:55에 게시됨
ECharts에서 데이터 표시 문제 해결하기
최근 ECharts를 사용하여 차트를 구현하는 과정에서 특정 설정을 변경하면 막대 그래프가 표시되지 않는 문제가 발생했습니다. 특히, X축의 글꼴 색상을 수정한 후에 이 문제가 나타났으며, 이를 해결하기 위해 여러 시도를 거쳤습니다.
이 문제는 pnpm install echarts 명령어로 라이브러리를 설치한 이후에 발생했으며, 일부 코드를 추가하거나 수정할 때 특정 임포트 문 ...
6월 26일 19:50에 게시됨
웹 기반 데이터 시각화 기초: Canvas, SVG 및 ECharts 활용
Canvas를 사용한 그래픽 그리기
HTML5의 <canvas> 요소는 자바스크립트를 통해 그래픽을 동적으로 생성할 수 있는 도구입니다. 기본 크기는 300×150픽셀이며, 스타일 속성이 아닌 width와 height 속성으로 크기를 지정해야 합니다. 캔버스 내부에 텍스트나 HTML 요소를 직접 삽입해도 렌더링되지 않으며, 모든 그리기는 JavaScript를 통해 수행되어야 합니다.
<c ...
6월 22일 01:21에 게시됨
Flask 기반 재난 구호 물자 관리 시스템 개발
시스템 아키텍처 구성
백엔드는 Flask 프레임워크를 기반으로 하며, 데이터베이스 연동에는 SQLAlchemy를 사용한다. 프론트엔드는 Bootstrap 또는 Vue.js로 구현되며, 전체 시스템은 물자 관리, 구조팀 정보, 피해 지역, 배분 이력이라는 네 가지 주요 모듈로 구성된다. RESTful API를 통해 프론트와 백엔드를 분리하고, JWT 토큰을 이용한 인증 방식을 적용한다.
데이터 ...
5월 25일 22:12에 게시됨