1.熟悉node，熟練掌握fs的使用
2.了解用express搭建后臺服務(wù)器，了解怎么向前臺發(fā)送數(shù)據(jù)
3.要有全局意識，將需要改變的顏色設(shè)置用var()來設(shè)置顏色
4.熟悉數(shù)組的方法，了解怎么通過數(shù)組方法處理數(shù)據(jù)
5.了解echarts的使用
6.熟悉ajax的使用

2.實現(xiàn)

2.1實現(xiàn)準備

在這里我通過一款軟件，來實現(xiàn)準備設(shè)計來實現(xiàn)項目的計劃樣子。軟件就是Pixos
在這里我希望你們在進行一個項目的設(shè)計之前一定要做一些前提準備，設(shè)計一個草圖

2.2搭建前臺頁面

關(guān)于這個前端頁面，相信各位的實力，應(yīng)該不難
搭建好的前端頁面如下：

2.3搭建后臺服務(wù)器

2.3.1搭建后臺

在項目中下載express npm i express --save

//搭建好了一個本地服務(wù)器
//端口號為8000
const express=require('express')
const fs=require('fs')
const app=express()
app.listen(8000,()=>{
    console.log("開啟成功")
})

2.3.2后臺處理要發(fā)送的數(shù)據(jù)

在后臺需要發(fā)送的數(shù)據(jù)有兩種
1.實時的年月日，以及當前的時間
2.實時的七天天氣信息

2.3.2.1實時時間

通過實例化Date（）函數(shù)就可以實現(xiàn)。
然后通過對應(yīng)的函數(shù)獲得時間信息。
然后對數(shù)據(jù)進行JSON化，發(fā)送時處理數(shù)據(jù)格式

在這里我們會設(shè)置一個接口，用于前端獲取數(shù)據(jù)。
/timeDate接口

app.get('/timeDate',(req,res)=>{
	//用于處理跨域問題
    res.setHeader('Access-Control-Allow-Origin', '*');
    //響應(yīng)頭
    res.setHeader('Access-Control-Allow-Headers', '*');
   //實例化內(nèi)置Date()庫
    var time=new Date()
    //得到年
    const year=time.getFullYear()
    const mouth=time.getMonth()+1
    const day=time.getDate()
    const hour=time.getHours()
    const min=time.getMinutes()
    const second=time.getSeconds()
    //將數(shù)據(jù)json化，傳輸數(shù)據(jù)
    const TimeDate={year,mouth,day,hour, min,second}
    //向客戶端發(fā)送數(shù)據(jù)
    res.send(JSON.stringify(TimeDate))
})

2.3.2.2七天天氣信息

這個七天的信息都是通過網(wǎng)上數(shù)據(jù)得到的。

在官網(wǎng)天氣官網(wǎng)你能獲取每天的實時信息。
你也可以通過我創(chuàng)建的數(shù)據(jù)接口獲得數(shù)據(jù)接口
由于考慮到請求的時間問題，我將數(shù)據(jù)存儲在data.json中
用于來提高數(shù)據(jù)請求與發(fā)送的時間。

實現(xiàn)的就是通過fs模塊讀取數(shù)據(jù)，然后來得到數(shù)據(jù)，
創(chuàng)建接口，向前端發(fā)送數(shù)據(jù)

然后就是后臺代碼：

fs.readFile('./data.json',(err,data)=>{
    if(err) return console.log('err')
    let result=JSON.parse(data)
    app.get('/weatherDate',(req,res)=>{ 
        res.setHeader('Access-Control-Allow-Origin', '*');
        //響應(yīng)頭
        res.setHeader('Access-Control-Allow-Headers', '*');
        res.send(result)
    })
})

2.4前端處理獲取的數(shù)據(jù)

2.4.1時間數(shù)據(jù)

我們要做的就是獲得到時間數(shù)據(jù)。
將其展示到對應(yīng)的位置。
1.時鐘表 2.時間顯示

先得到對應(yīng)的DOM結(jié)構(gòu)，然后設(shè)置js與css樣式

處理流程就是:
綁定點擊事件==》通過ajax獲取接口數(shù)據(jù)==》得到對應(yīng)的DOM接口 =+=》插入數(shù)據(jù)，設(shè)置css樣式

/*渲染時鐘*/
//獲得時，分，秒的DOM結(jié)構(gòu)
const hours=document.querySelector(".hour")
const mins=document.querySelector('.min')
const seconds=document.querySelector('.seconds')
//獲得六個空地方的DOM結(jié)構(gòu)
const item1=document.querySelector('.item1')
const item2=document.querySelector('.item2')
const item3=document.querySelector('.item3')
const item4=document.querySelector('.item4')
const item5=document.querySelector('.item5')
const item6=document.querySelector('.item6')
//綁定點擊事件
const bottom=document.getElementById('bottom')
bottom.addEventListener('click',timeshow)
function timeshow(){
    let xhr=new XMLHttpRequest()
    xhr.open("GET",'http://localhost:8000/timeDate')
    xhr.send()
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
                //對請求的數(shù)據(jù)結(jié)構(gòu)化
                let result =JSON.parse(xhr.response);
                //得到時
                let hour = result.hour
                const hourDeg = (hour / 12) * 360 + 90
                hours.style.transform = `rotate(${hourDeg}deg)`;
                //得到分
                let min = result.min
                const minDeg = (min / 60) * 360 + 90
                mins.style.transform = `rotate(${minDeg}deg)`
                //得到秒
                let second = result.second
                const secondDeg = (second / 60) * 360 + 90
                seconds.style.transform = `rotate(${secondDeg}deg)`
                
                //將數(shù)據(jù)插入指定的位置
                 item1.innerHTML =result.year
                 item2.innerHTML =result.mouth
                 item3.innerHTML = result.day
                 item4.innerHTML =result.hour
                 item5.innerHTML = result.min
                 item6.innerHTML = result.second
            } else {
                console.log("err")
            }
        }
    }
}

2.4.2天氣信息

我只是獲取了天氣信息的data部分。
需要的數(shù)據(jù)就是。
1.七天的時間，以及他們對應(yīng)的最高，最低溫度
2.七天的溫度，以及對應(yīng)的溫馨提示信息。
時間的高低我用柱狀圖表示。
溫度及提示用餅圖表示

設(shè)置echarts圖表時，最重要的時data數(shù)據(jù)，其他的輔助信息可根據(jù)管網(wǎng)提示來設(shè)置

2.4.2.1時間數(shù)據(jù)處理

獲得接口數(shù)據(jù)，得到對應(yīng)的值

let xhr=new XMLHttpRequest()
    xhr.open("GET",'http://localhost:8000/timeDate')
    xhr.send()

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
 var result=JSON.parse(xhr.response)
 var data=result.data
 console.log(data)
 //由于得到的數(shù)據(jù)是數(shù)組，
 //而option的data數(shù)據(jù)的格式是json格式。
 //所以需要將數(shù)據(jù)加工
 const maxMINArr=data.map((item)=>{
       return {product:item.date,最低溫度:item.tem1,最高溫度:item.tem2}
  })
}
//echarts中的option的屬性設(shè)置
 dataset: {
       dimensions: ['product', '最高溫度', '最低溫度'],
        source:maxMINArr
     },

2.4.2.2溫度及提示

需要注意的是由于得到的數(shù)據(jù)是
數(shù)組，而echarts的option設(shè)置的數(shù)據(jù)
需要的是json類的形式，所以
需要對數(shù)據(jù)json化

let xhr=new XMLHttpRequest()
    xhr.open("GET",'http://localhost:8000/timeDate')
    xhr.send()

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
 var result=JSON.parse(xhr.response)
 const dataArr=data.map(item=>{
     return {value:item.tem,name:item.date,level:item.air_level,tips:item.index[3]}
 })

//echarts中的option的屬性設(shè)置
tooltip:{
       show:true,
       //提示信息json化數(shù)據(jù)
      formatter: function(arg){
	 return arg.data.name+' : '+arg.data.value+'c'+' :  '+arg.data.level+' :  '+arg.data.tips.desc
      }
 },
series: [
   {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data:dataArr,
       emphasis: {
       itemStyle: {
              shadowBlur: 10,
             shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
 }
 ]
 }