소개
이 프로젝트에서는 한 도시의 연중 기온 데이터를 표시하는 날씨 추세 차트를 만드는 방법을 배우게 됩니다. 이 차트를 통해 사용자는 현재 달의 데이터와 다음 7 일간의 데이터를 전환하여 날씨 추세를 포괄적으로 볼 수 있습니다.
👀 미리보기
"현재 달"과 "다음 7 일" 전환 효과는 아래 그림과 같습니다.
달 전환 효과는 다음과 같습니다.
🎯 과제
이 프로젝트에서 다음을 배우게 됩니다.
- Axios 를 사용하여 JSON 파일에서 날씨 데이터를 가져오는 방법
- 월 목록을 렌더링하고 클릭 이벤트를 처리하여 표시된 데이터를 변경하는 방법
- 현재 달의 데이터와 다음 7 일간의 데이터를 전환하는 탭을 구현하는 방법
- 날씨 데이터를 표시하기 위해 Echarts 차트를 초기화하고 사용자 정의하는 방법
🏆 성과
이 프로젝트를 완료하면 다음을 수행할 수 있습니다.
- Axios 를 사용하여 JSON 파일에서 데이터를 가져오기
- Vue.js 를 사용하여 반응형 (responsive) 하고 대화형 (interactive) 사용자 인터페이스 만들기
- Echarts 를 사용하여 고급 기능이 있는 사용자 정의 차트 만들기
- 사용자 상호 작용을 처리하고 그에 따라 차트 업데이트
- 프론트엔드 개발, 데이터 시각화 및 사용자 경험 디자인에 대한 지식 적용
프로젝트 구조 설정
이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요.
프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다.
├── css
│ └── style.css
├── js
│ ├── axios.js
│ ├── echarts.min.js
│ ├── vue.min.js
│ └── weather.json
└── index.html
여기서:
css/style.css는 스타일 파일입니다.js/axios.js는 axios 파일입니다.js/vue.min.js는 vue2.x 파일입니다.js/echarts.min.js는 echarts 파일입니다.js/weather.json은 요청에 필요한 날씨 데이터입니다.index.html은 메인 페이지입니다.
WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.
다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고침하면 페이지가 표시됩니다.
날씨 데이터 가져오기
이 단계에서는 제공된 JSON 파일에서 날씨 데이터를 가져오는 방법을 배웁니다.
index.html파일에서 파일 하단의<script>태그를 찾습니다.<script>태그 내에서new Vue()를 사용하여 새로운 Vue 인스턴스를 생성합니다.- Vue 인스턴스의
data옵션에 다음 속성을 추가하고 초기 값을 할당합니다.
data: {
// ...
data: [],
yData: [],
xData: [],
},
- Vue 인스턴스의
methods훅에서initChart함수 내의this.chartOptions를 찾고, xAxis 및 series 의data를 다음과 같이 해당 변수로 변경합니다.
this.chartOptions = {
// ...
xAxis: [
{
// ...
data: this.xData
}
],
// ...
series: [
{
// ...
data: this.yData
}
]
};
- Vue 인스턴스의
mounted훅에서axios.get()메서드를 사용하여./js/weather.json파일에서 날씨 데이터를 가져옵니다. 수정된 코드는 다음과 같습니다.
mounted: async function () {
const res = await axios.get("./js/weather.json");
this.data = res.data;
this.yData = res.data[0]["January"];
this.xData = [...this.yData.map((e, i) => i + 1)];
this.$nextTick(() => {
this.initChart();
});
},
이 코드는 JSON 파일에서 날씨 데이터를 가져와 data 속성에 저장한 다음, 차트의 초기 yData 및 xData 속성을 설정합니다. 마지막으로, initChart() 메서드를 호출하여 차트를 렌더링합니다.
월별 목록 렌더링
이 단계에서는 월 목록을 렌더링하고 클릭 이벤트를 처리하여 표시된 데이터를 변경하는 방법을 배웁니다.
index.html파일에서 Vue 인스턴스의data옵션에 다음 속성을 추가하고 초기 값을 할당합니다.
data: {
// ...
monthName: "January",
monthNumber: 0,
},
class="month"를 가진<ul>요소에서v-for지시어를 사용하여 월 목록을 렌더링합니다.<li>요소에 클릭 이벤트 핸들러를 추가하여 월을 클릭하면changeMonth()메서드를 호출합니다.
<ul>
<li
v-for="(item,key,index) in monthList"
:class="[monthName===key?'active':'']"
@click="changeMonth(key,index)"
>
{{item}}
</li>
</ul>
- Vue 인스턴스의
methods섹션에changeMonth()메서드를 추가합니다. 이 메서드는 선택된 월을 기반으로monthName,monthNumber,yData, 및xData속성을 업데이트한 다음,initChart()메서드를 호출하여 차트를 다시 렌더링합니다.
changeMonth(month, index) {
this.monthName = month;
this.monthNumber = index;
this.yData = this.data[index][month];
this.xData = [...this.yData.map((e, i) => i + 1)];
if (index === this.nowMonth) {
this.type = 1;
}
this.initChart();
},
현재 월 및 다음 7 일 탭 구현
이 단계에서는 사용자가 현재 월의 데이터와 다음 7 일의 데이터를 전환할 수 있도록 하는 탭을 구현하는 방법을 배웁니다.
index.html파일에서 Vue 인스턴스의data섹션에 다음 속성을 추가합니다.
data: {
type: 1, // 다음 7 일 및 현재 월에 대한 데이터 상태
nowMonth: new Date().getMonth(),
},
id="currentMonth"를 가진<div>에서monthNumber및nowMonth속성을 기반으로 조건부 렌더링을 추가합니다. 이렇게 하면 현재 월에 대한 탭만 표시됩니다.
<div id="currentMonth" v-if="monthNumber===nowMonth">
<div class="title">
<h3>{{typeTitle}}</h3>
<div class="type" @click="clickType($event)">
<span id="seven" :class="{'active':!type}">The next 7 days</span>
<span id="current" :class="{'active':type}">The current month</span>
</div>
</div>
</div>
- Vue 인스턴스의
methods섹션에clickType()메서드를 추가합니다. 이 메서드는 클릭된 탭을 기반으로type,typeTitle,yData, 및xData속성을 업데이트한 다음,initChart()메서드를 호출하여 차트를 다시 렌더링합니다.
clickType(e) {
switch (e.target.id) {
case "seven":
this.type = 0;
this.typeTitle = "The next 7 days";
[this.xData, this.yData] = this.getSevenData();
break;
case "current":
this.type = 1;
this.typeTitle = "The current month";
this.yData = this.data[this.monthNumber][this.monthName];
this.xData = [...this.yData.map((e, i) => i + 1)];
break;
}
this.initChart();
},
- 다음 7 일에 대한 x 축 레이블과 y 축 데이터를 계산하는
getSevenData()메서드를 추가합니다.
getSevenData() {
let newXdata = [],
newYdata = [];
for (let i = 0; i < 7; i++) {
let now = new Date();
let time = now.getTime() + 1000 * 60 * 60 * 24 * i;
now.setTime(time);
newXdata.push(`${now.getMonth() + 1}/${now.getDate()}`);
if (this.monthNumber === now.getMonth()) {
newYdata.push(this.yData[now.getDate() - 1]);
} else {
let nextMonth = this.data[now.getMonth()];
for (const key in nextMonth) {
newYdata.push(nextMonth[key][now.getDate() - 1]);
}
}
}
return [newXdata, newYdata];
},
이 메서드는 월 간의 전환을 고려하여 다음 7 일에 대한 x 축 레이블과 y 축 데이터를 계산합니다.
- 파일을 저장하고 페이지를 다시 로드하여 업데이트된 차트를 확인합니다. 다음 그림은 "현재 월"과 "다음 7 일" 간의 전환 효과를 보여줍니다 (시간 함수를 통해 얻었으며, 여기서는 4 월을 가정합니다).
월 전환 효과는 다음과 같습니다.
요약
축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.
