ECharts 로 데이터 시각화 차트 만들기

소개

이 프로젝트에서는 ECharts 라이브러리를 사용하여 데이터 시각화 차트를 만드는 방법을 배우게 됩니다. 이 프로젝트는 온라인 학습 플랫폼 사용자 Lucy 가 매일 학습 시간을 더 잘 시각화할 수 있도록 돕는 것을 목표로 합니다.

👀 미리보기

🎯 과제

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

JSON 파일에서 데이터를 가져와 필요한 정보를 추출하기 위해 처리하는 방법.
ECharts 라이브러리를 사용하여 주간 및 월간 학습 시간 통계를 표시하는 막대 차트를 만드는 방법.
사용자가 주간 및 월간 보기를 전환할 수 있도록 상호 작용을 구현하는 방법.
창 크기가 조정될 때 차트의 크기를 동적으로 조정하는 방법.

🏆 성과

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

JSON 파일에서 데이터를 가져와 시각화를 위해 조작합니다.
학습 시간 통계를 표시하도록 ECharts 막대 차트를 구성하고 사용자 정의합니다.
차트에 상호 작용을 추가하고 사용자 상호 작용을 처리합니다.
차트가 반응형으로 유지되고 창 크기 조정에 적응하도록 합니다.

프로젝트 구조 설정

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

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

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

이 구조에서:

index.html은 메인 페이지입니다.
js/echarts.min.js는 ECharts 파일입니다.
js/axios.min.js는 axios 파일입니다.
css/style.css는 스타일 파일입니다.
data.json은 학습 시간 데이터 파일입니다.

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

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고쳐 페이지를 확인합니다.

✨ 솔루션 확인 및 연습

데이터 가져오기

이 단계에서는 data.json 파일에서 데이터를 가져와 필요한 데이터 구조에 저장하는 방법을 배웁니다.

코드 편집기에서 index.html 파일을 엽니다.
JavaScript 코드에서 // TODO 섹션을 찾습니다.
주간 및 월간 데이터를 저장할 두 개의 객체를 생성합니다:

// TODO
let weekData = {
  x: [],
  y: []
};

let monthData = {
  x: [],
  y: []
};

차트에 전달된 데이터를 기반으로 차트의 옵션을 업데이트하는 mySetOption() 함수를 구현합니다.

function mySetOption(data) {
  option.xAxis.data = data.x;
  option.series[0].data = data.y;
  myChart.setOption(option);
}

axios.get() 메서드를 사용하여 data.json 파일에서 데이터를 가져옵니다. API 호출의 응답에는 res.data.data 속성에 데이터가 포함됩니다.

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

  // Process the data here
});

then() 메서드의 콜백 함수 내부에서 data 객체를 반복하고 각 날짜에 대한 학습 시간 데이터를 처리합니다. 각 주 및 월의 총 학습 시간을 계산하고 결과를 각각 weekData 및 monthData 객체에 저장합니다.

for (const key in data) {
  let weekCount = (monthCount = 0),
    weekNum = 1;

  for (let i = 0; i < data[key].length; i++) {
    weekCount += data[key][i];
    monthCount += data[key][i];

    if (
      (i + 1) % 7 === 0 ||
      (data[key].length - i <= 7 && i === data[key].length - 1)
    ) {
      weekData.x.push(`Week ${weekNum++} (${key})`);
      weekData.y.push(weekCount);
      weekCount = 0;
    }
  }
  monthData.x.push(key);
  monthData.y.push(monthCount);
}

데이터를 처리한 후 mySetOption() 함수를 호출하고 weekData 객체를 전달하여 기본적으로 주간 통계를 표시합니다.

mySetOption(weekData);

이 단계의 코드 처리 후 효과는 다음과 같습니다:

// TODO
let weekData = {
    x: [],
    y: []
  },
  monthData = {
    x: [],
    y: []
  };

function mySetOption(data) {
  option.xAxis.data = data.x;
  option.series[0].data = data.y;
  // reset
  myChart.setOption(option);
}

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

  for (const key in data) {
    let weekCount = (monthCount = 0),
      weekNum = 1;

    for (let i = 0; i < data[key].length; i++) {
      weekCount += data[key][i];
      monthCount += data[key][i];

      if (
        (i + 1) % 7 === 0 ||
        (data[key].length - i <= 7 && i === data[key].length - 1)
      ) {
        weekData.x.push(`Week ${weekNum++} (${key})`);
        weekData.y.push(weekCount);
        weekCount = 0;
      }
    }
    monthData.x.push(key);
    monthData.y.push(monthCount);
  }
  mySetOption(weekData);
});

✨ 솔루션 확인 및 연습

차트 표시

이 단계에서는 ECharts 라이브러리를 사용하여 차트 표시를 전환하는 방법을 배웁니다.

코드 편집기에서 index.html 파일을 엽니다.
JavaScript 코드에서 mySetOption 섹션을 찾습니다.
사용자가 탭을 클릭할 때 차트를 업데이트하기 위해 함수 mySetOption 뒤에 탭 (주간 및 월간) 에 대한 이벤트 리스너를 추가합니다.

function mySetOption(data) {
  option.xAxis.data = data.x;
  option.series[0].data = data.y;
  // reset
  myChart.setOption(option);
}

document.querySelector(".tabs").addEventListener("click", function (e) {
  if (e.target.id === "week") {
    mySetOption(weekData);
  } else if (e.target.id === "month") {
    mySetOption(monthData);
  }
});

이러한 단계를 통해 프로젝트를 완료했습니다. 이제 차트는 data.json 파일에서 가져온 데이터를 기반으로 주간 및 월간 학습 시간 통계를 표시합니다. 최종 페이지 효과는 다음과 같습니다: