노력은 배신하지 않는다

소개

이 프로젝트에서는 ECharts 를 사용하여 지난 5 년간 도시의 작물 수확량에 대한 통계 차트를 만드는 방법을 배우게 됩니다. 이 프로젝트는 작물 수확량에 대한 통계를 통해 실질적인 문제를 분석하는 방법을 보여주는 것을 목표로 하며, 이는 사람들의 생계에 직접적인 영향을 미칩니다.

👀 미리보기

🎯 과제

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

• 프로젝트 환경을 설정하고 제공된 파일을 이해하는 방법
• JSON 파일에서 데이터를 가져와 ECharts 시각화를 업데이트하기 위해 처리하는 방법
• 선 차트 및 파이 차트의 모양과 레이아웃을 사용자 정의하는 방법

🏆 성과

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

• Axios 라이브러리를 사용하여 JSON 파일에서 데이터를 가져오기
• ECharts option 객체를 조작하여 시각화 업데이트
• 제목, 레이아웃 및 기타 속성을 조정하여 차트 사용자 정의

프로젝트 구조 설정

이 단계에서는 프로젝트 구조를 설정하고 필요한 파일과 폴더를 준비합니다.

코드 편집기에서 프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다:

├── data.json
├── index.html
└── js
    ├── axios.min.js
    └── echarts.min.js

여기서:

• index.html은 메인 페이지입니다.
• js/echarts.min.js는 ECharts 파일입니다.
• js/axios.min.js는 axios 파일입니다.
• data.json은 해당 연도의 곡물 생산량 데이터를 톤 단위로 나타냅니다.

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

다음으로, VM 상단의 "Web 8080"을 열고 페이지를 수동으로 새로 고쳐 브라우저에서 다음 효과를 확인합니다:

데이터 가져오기

이 단계에서는 데이터 요청을 완료하고 선 차트와 파이 차트에 작물 수확량 데이터를 올바르게 표시합니다.

1. index.html 파일에서 // TODO 섹션을 찾습니다.
2. axios.get() 메서드를 사용하여 data.json 파일에서 데이터를 가져옵니다.

axios.get("./data.json").then((res) => {
  let data = res.data.data;
  // TODO: Process the data and update the option object
});

3. .then() 콜백 내부에서 data.json 파일의 데이터를 처리하고 option 객체를 적절하게 업데이트합니다.
   • 각 작물 유형에 대한 데이터를 저장할 객체 dataObj를 생성합니다.
   • 데이터의 레이블을 저장할 배열 sourceTip을 생성합니다.
   • 데이터를 반복하고 dataObj 및 sourceTip 배열을 채웁니다.
   • dataObj 및 sourceTip의 데이터로 채워진 새 newSource 배열을 생성합니다.
   • option.dataset.source를 newSource 배열로 업데이트합니다.
   • myChart.setOption(option)을 호출하여 새 데이터로 차트를 업데이트합니다.

// TODO
let dataObj = {
  wheat: ["wheat"],
  soybean: ["soybean"],
  potato: ["potato"],
  corn: ["corn"]
};
let sourceTip = ["all"];

axios.get("./data.json").then((res) => {
  let data = res.data.data;

  for (const key1 in data) {
    sourceTip.push(key1);
    for (const key2 in data[key1]) {
      dataObj[key2].push(data[key1][key2]);
    }
  }

  let newSource = [];
  newSource.push(sourceTip);
  for (const key in dataObj) {
    newSource.push(dataObj[key]);
  }

  option.dataset.source = newSource;
  myChart.setOption(option);
});

4. index.html 파일을 저장하고 페이지를 새로 고칩니다. 이제 올바른 데이터로 업데이트된 선 차트와 파이 차트를 볼 수 있습니다.

요약

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