Echarts 및 JSON 을 이용한 데이터 시각화

소개

이 프로젝트에서는 JSON 파일에서 데이터를 가져와 다양한 음식의 단백질 함량을 렌더링하고, Echarts 파이 차트를 생성하여 데이터를 시각화하는 방법을 배우게 됩니다. 이 프로젝트는 JavaScript 를 사용하여 데이터 조작 및 데이터 시각화 작업을 직접 경험할 수 있도록 하는 것을 목표로 합니다.

👀 미리보기

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

• Fetch API 를 사용하여 JSON 파일에서 데이터를 가져오는 방법
• 웹 페이지에서 다양한 음식의 단백질 함량을 렌더링하는 방법
• 단백질 함량 데이터를 시각화하기 위해 Echarts 파이 차트를 생성하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

• JSON 파일에서 데이터를 가져와 처리
• 가져온 데이터를 기반으로 HTML 요소를 동적으로 렌더링
• Echarts 라이브러리를 사용하여 대화형 파이 차트 생성
• 데이터 시각화를 웹 애플리케이션에 통합

프로젝트 구조 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요:

프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다:

├── css
├── index.html
├── lib
└── mock
    └── data.json

그 중:

• index.html은 메인 페이지입니다.
• css는 프로젝트 스타일을 저장하는 폴더입니다.
• lib는 프로젝트 종속성을 저장하는 폴더입니다.
• mock/data.json은 프로젝트 요청에 사용되는 JSON 데이터입니다.

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고침하면 페이지를 볼 수 있습니다.

데이터 가져오기 및 단백질 함량 렌더링

이 단계에서는 제공된 JSON 파일에서 데이터를 가져와 다양한 음식의 단백질 함량을 렌더링하는 방법을 배우게 됩니다.

1. 프로젝트 디렉토리에서 index.html 파일을 엽니다.
2. <script> 태그 내의 index.html 파일에서 TODO 주석을 찾습니다.
3. fetchData 함수 내에서 다음 코드를 추가하여 MockURL에서 데이터를 가져와 단백질 함량을 렌더링합니다:

let dataList = ref([]);
async function fetchData() {
  // TODO: code to be added
  let data = await fetch(MockURL).then((res) => res.json());
  data.unshift({
    name: "header",
    icon: "none"
  });
  echartsInit(data);
  dataList.value = data.slice(1);
}

return {
  echartsInit,
  fetchData
};

4. onMounted 훅에서 fetchData 함수를 호출하여 데이터를 가져와 단백질 함량을 렌더링합니다. 마지막으로, return 내에서 반환합니다.

onMounted(() => {
  fetchData();
});
return {
  echartsInit,
  fetchData,
  dataList
};

5. HTML 에서 TODO: code to be added to render the fetched data 아래에 다음 코드를 추가하여 데이터를 표시합니다.

<div class="protein-item" v-for="data in dataList" :key="data.name">
  {{data.name}} {{data.value}}
</div>

6. index.html 파일을 저장하고 페이지를 새로 고칩니다. 이제 .protein-container 요소에 다양한 음식의 단백질 함량이 표시되어야 합니다.

완료된 효과는 다음과 같습니다:

축하합니다! "음식 단백질 공개" 프로젝트를 완료했습니다. JSON 파일에서 데이터를 가져와 단백질 함량을 렌더링하고, Echarts 파이 차트를 생성하여 데이터를 시각화하는 방법을 배웠습니다.

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.