前言

所謂數(shù)據(jù)可視化，我們可以理解為從宏觀角度來看一眼就能看出來整個(gè)數(shù)據(jù)的占比，走向。對(duì)于數(shù)據(jù)可視化，很多互聯(lián)網(wǎng)公司是很看重這一塊的，包括大廠；就比如阿里的淘寶，雙十一的時(shí)候往往就需要將消費(fèi)者的一些數(shù)據(jù)通過圖的形式展現(xiàn)出來。接下來我們就來實(shí)現(xiàn)一個(gè)天氣的數(shù)據(jù)可視化（移動(dòng)端開發(fā)），看如下效果圖（iPhone6/7/8）。

準(zhǔn)備工作

1. 注冊(cè)一個(gè)高德地圖API賬號(hào)，選擇開發(fā)支持，地圖 JS API。

2. 登錄控制臺(tái)成為開發(fā)者并創(chuàng)建?key。

3. 進(jìn)入安全密鑰使用說明，找到方式二。

4. 創(chuàng)建一個(gè)vue項(xiàng)目，將vue的一些默認(rèn)組件和樣式刪除，在views下新建一個(gè)Index.vue，并且在index.js下配置路由。目錄結(jié)構(gòu)如下所示：

5. 通過npm install echarts --save安裝一個(gè)依賴，這樣就可以使用echarts了。

開始（細(xì)分11步）

1. 將準(zhǔn)備工作第三步找到的方式二的兩個(gè)<script>引入到index.html中，將你自己申請(qǐng)的key值和安全密鑰粘貼到里面去。這樣就可以使用高德地圖 JS API 開發(fā)地圖應(yīng)用。

2. 設(shè)置頭部樣式和背景色，時(shí)間和切換城市用到了彈性布局。

  //html
  <div class="container">
        <div class="nav">
            <div class="time">7:41</div>
            <div class="city">切換城市</div>
        </div>
  <div>

 //css
  .container {
    min-height: 100vh;
    background: #000;
    opacity: 0.7;
    color: #fff;
}

.nav {
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

 //html
 <div class="city-info">
            <p class="city">{{}}</p>
            <p class="weather">{{}}</p>
            <h2 class="temp">
                <em></em>℃
            </h2>
            <div class="detail">
                <span>風(fēng)力：{{
                }}</span>|
                <span>風(fēng)向：{{ }}</span>|
                <span>空氣濕度：{{  }}</span>
            </div>
        </div>
        <div class="future">
            <div class="group" v-if="futureData.length > 0">
                明天：
                <span class="tm">白天:{{ }}℃ {{ 
                }} {{  }}風(fēng) {{ }} </span>
                <span class="tm"> 夜間:{{
                }}℃ {{  }} {{  }}風(fēng) {{ 
}}
                </span>
            </div>
            <div class="group" v-if="futureData.length > 0">
                后天：
                <span class="tm">白天:{{ }}℃ {{ 
                }} {{  }}風(fēng) {{  }} </span>
                <span class="tm"> 夜間:{{ 
                }}℃ {{  }} {{  }}風(fēng) {{ 
}}
                </span>
            </div>
        </div> 

//css
.city-info {
    text-align: center;

    .temp {
        font-size: 26px;

        em {
            font-size: 34px;
            font-style: normal;
        }
    }
}

.future {
    padding: 0 10px;
    margin-top: 30px;

    .group {
        height: 44px;
        line-height: 44px;
        background: rgba(255, 255, 255, 0.3);
        margin-bottom: 10px;
        padding: 0 10px;
        font-size: 13px;
        border-radius: 5px;

    }
}

//html
<div class="echart-container"> </div>

//css
.echart-container {
    width: 100%;
    height: 50vh;
}

將這段代碼復(fù)制到onMounted的回調(diào)函數(shù)中，這樣我們就能獲取到定位信息。

7. 接下來就可以來獲取天氣了，我們把獲取天氣封裝成一個(gè)函數(shù)getWeather。同樣的我們來到：開發(fā)?>?地圖 JS API v2.0?>?教程?>?服務(wù)?>?天氣，找到實(shí)時(shí)天氣查詢。

把上圖中的代碼復(fù)制到獲取天氣的函數(shù)中，并將它放在獲取定位成功后執(zhí)行，傳入定位的城市，這樣就可以獲得定位的城市的天氣情況了。

8. 同樣的，我們來獲取未來幾天的天氣情況，通過下面的代碼就可以獲取到。

weather.getForecast('cityName', function(err, data) {
console.log(err, data); });

注意：此時(shí)輸出的未來天氣是一個(gè)數(shù)組。

9. 我們已經(jīng)獲取到了天氣數(shù)據(jù)了，接下來就要把這些數(shù)據(jù)存起來，把它變成響應(yīng)式的，然后把它放到頁面上展示出來。

 const state = reactive({
            today: {},
            futureData: [],
        })
        
  state.today = data
  state.futureData = data.forecasts
   return {
            ...toRefs(state),
        }

 <p class="city">{{ today.city }}</p>
 <p class="weather">{{ today.weather }}</p>

<div class="group" v-if="futureData.length > 0">
                明天：
<span class="tm">白天:{{ futureData[1].dayTemp }}℃ {{ futureData[1].dayWeather}} {{ futureData[1].dayWindDir }}風(fēng) {{ futureData[1].dayWindPower }} </span>
<span class="tm"> 夜間:{{ futureData[1].nightTemp }}℃ {{ futureData[1].nightWeather }} {{ futureData[1].nightWindDir }}風(fēng) {{ futureData[1].nightWindPower
}}
                </span>
            </div>

  const tempArr = ref([])
   data.forecasts.forEach(item => {
                        tempArr.value.push(item.dayTemp)
                    })
  const echartContainer = ref(null)
  const initEchart = () => {
            const myChat = echarts.init(echartContainer.value);
            let option = {
                xAxis: {
                    type: 'category',
                    data: ['今天', '明天', '后天', '大后天'],
                    lineStyle: {
                        color: '#fff'
                    },
                    axisTick: {
                        show: false
                    },

                },
                yAxis: {
                    type: 'value',
                    show: false

                },
                series: [
                    {
                        data: tempArr.value,
                        type: 'line'
                    }
                ]
            };
            myChat.setOption(option)
        }
   return {
            echartContainer
        }

<script>
import { toRefs, watchEffect, reactive, ref, onMounted } from 'vue';
import * as echarts from 'echarts';


export default {
    setup() {
        const echartContainer = ref(null)
        const state = reactive({
            today: {},
            futureData: [],
        })
        const tempArr = ref([])



        onMounted(() => {
            //1.獲取定位
            AMap.plugin('AMap.CitySearch', function () {
                var citySearch = new AMap.CitySearch()
                citySearch.getLocalCity(function (status, result) {
                    // console.log(status);
                    if (status === 'complete' && result.info === 'OK') {
                        // 查詢成功，result即為當(dāng)前所在城市信息
                        //console.log(result.city);
                        getWeather(result.city)
                    }
                })
            })
        })
        const getWeather = (cityName) => {
            //加載天氣查詢插件
            AMap.plugin('AMap.Weather', function () {
                //創(chuàng)建天氣查詢實(shí)例
                var weather = new AMap.Weather();

                //執(zhí)行實(shí)時(shí)天氣信息查詢
                weather.getLive(cityName, function (err, data) {
                    console.log(err, data);
                    state.today = data
                });
                //未來的天氣
                weather.getForecast(cityName, function (err, data) {
                    console.log(err, data);
                    state.futureData = data.forecasts

                    data.forecasts.forEach(item => {
                        tempArr.value.push(item.dayTemp)
                    })
                    initEchart()
                });



            });
        }

        const initEchart = () => {
            const myChat = echarts.init(echartContainer.value);
            let option = {
                xAxis: {
                    type: 'category',
                    data: ['今天', '明天', '后天', '大后天'],
                    lineStyle: {
                        color: '#fff'
                    },
                    axisTick: {
                        show: false
                    },

                },
                yAxis: {
                    type: 'value',
                    show: false

                },
                series: [
                    {
                        data: tempArr.value,
                        type: 'line'
                    }
                ]
            };
            myChat.setOption(option)
        }
        return {
            ...toRefs(state),
            echartContainer
        }
    }
}
</script>