휴대폰 사용 시간

소개

이 프로젝트에서는 ECharts 라이브러리를 사용하여 선 차트를 만드는 방법을 배우게 됩니다. 이 차트는 사용자가 일주일 동안 매일 휴대폰을 사용하는 시간을 표시합니다.

👀 미리보기

🎯 과제

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

• 프로젝트를 설정하고 필요한 파일을 여는 방법
• ECharts 구성의 오류를 수정하는 방법
• 선 차트의 구성을 이해하는 방법
• 구성을 수정하여 차트를 사용자 정의하는 방법

🏆 성과

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

• ECharts 라이브러리를 사용하여 선 차트를 생성할 수 있습니다.
• 차트의 제목, 축 및 데이터 계열을 구성할 수 있습니다.
• 구성을 수정하여 차트를 사용자 정의할 수 있습니다.

프로젝트 설정

이 단계에서는 프로젝트를 설정하고 편집기에서 파일을 엽니다.

1. 오른쪽에서 편집기를 엽니다. index.html과 echarts.js의 두 파일을 볼 수 있습니다.
2. WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.
3. VM 상단에서 "Web 8080"을 열고 수동으로 새로 고쳐 페이지를 확인합니다.

index.html 파일의 오류 수정

이 단계에서는 index.html 파일의 오류를 수정합니다.

1. index.html 파일에서 var option = {} 섹션을 찾습니다.
2. 축이 잘못 표시되도록 하는 구성 항목에 버그가 있습니다.
3. option 객체를 다음으로 업데이트합니다:

var option = {
  title: {
    text: "Hours spent using mobile phones"
  },
  xAxis: {
    type: "category",
    data: [
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday",
      "Sunday"
    ]
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      data: [2.5, 2, 2.6, 3.2, 4, 6, 5],
      type: "line"
    }
  ]
};

4. 위의 코드를 이해합니다:

• title 속성은 선 차트의 제목을 설정합니다.
• xAxis 속성은 x 축을 구성하며, "category" 유형으로 설정되고 요일을 표시합니다.
• yAxis 속성은 y 축을 구성하며, "value" 유형으로 설정됩니다.
• series 속성은 각 요일별 휴대폰 사용 시간 데이터인 data와 차트 유형을 선 차트로 지정하는 type을 포함하는 계열입니다.

5. 파일을 저장하고 페이지를 다시 로드하여 업데이트된 차트를 확인합니다. 완성된 결과는 다음과 같습니다:

요약

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