Echarts 로 실시간 판매 대시보드 만들기

소개

이 프로젝트에서는 Echarts 라이브러리를 사용하여 실시간 판매 대시보드를 만드는 방법을 배우게 됩니다. 대시보드는 판매 및 거래량 데이터를 시각적으로 매력적이고 이해하기 쉬운 형식으로 표시합니다.

👀 미리보기

실시간 판매 대시보드 미리보기

🎯 과제

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

프로젝트를 설정하고 필요한 파일을 얻는 방법
index.js 파일에서 "yAxis" 설정을 완료하는 방법
백엔드 데이터의 값을 renderChart 함수 내의 적절한 차트 옵션에 올바르게 할당하는 방법

🏆 성과

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

Echarts 라이브러리를 사용하여 데이터를 차트로 렌더링
데이터 시각화 프로젝트를 위한 코드 구조 및 구성
비동기 데이터 검색으로 작업하고 실시간으로 차트 업데이트

프로젝트 구조 설정

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

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

├── echarts.js
├── index.css
├── index.html
└── index.js

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

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

yAxis 설정 완료

이 단계에서는 index.js 파일에서 "yAxis" 설정을 완료하는 방법을 배웁니다.

index.js 파일을 엽니다.
option 객체에서 yAxis 설정을 찾습니다.
다음 요구 사항을 충족하도록 yAxis 설정을 업데이트합니다:
- 첫 번째 항목은 "sales"를 name으로, 차트의 왼쪽에 position을 가져야 합니다.
- 두 번째 항목은 "volume"을 name으로, 차트의 오른쪽에 position을 가져야 합니다.

업데이트된 yAxis 설정은 다음과 같아야 합니다:

yAxis: [
  {
    type: "value",
    name: "sales",
    position: "left"
  },
  {
    type: "value",
    name: "volum",
    position: "right"
  }
],

renderChart 함수 완성

이 단계에서는 index.js 파일에서 renderChart 함수를 완성하는 방법을 배웁니다.

index.js 파일을 엽니다.
renderChart 함수를 찾습니다.
renderChart 함수 내의 코드를 완성하여 saleObj 및 countObj의 값을 X 축의 시간, Y 축의 판매량 및 볼륨에 올바르게 할당합니다.

업데이트된 renderChart 함수는 다음과 같아야 합니다:

async function renderChart() {
  const result = await Ajax();
  document.querySelector("#result").innerText = JSON.stringify(result);
  const myChart = echarts.init(document.getElementById("main"));

  // Assign the values from `saleObj` and `countObj` to the appropriate options
  option.xAxis.data = Object.keys(result.data.saleObj);
  option.series[0].data = Object.values(result.data.saleObj);
  option.series[1].data = Object.values(result.data.countObj);

  myChart.setOption(option, true);
  document.querySelector("#data").innerText = JSON.stringify(charData);
}

이 단계를 완료하면 판매 대시보드 프로젝트가 완전히 작동하여 실시간 판매량 및 볼륨 데이터를 올바르게 표시해야 합니다. 최종 페이지 효과는 다음과 같습니다:

Image Description

요약

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

Echarts 를 활용한 실시간 판매 대시보드

소개