這里給大家分享我在網(wǎng)上總結(jié)出來的一些知識，希望對大家有所幫助

前言

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

(資料圖片)

準備工作

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

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

3. 進入安全密鑰使用說明，找到方式二。

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

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

開始（細分11步）

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

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

//html  
        
            
7:41
            
切換城市
        
  

//css  .container {    min-height: 100vh;    background: #000;    opacity: 0.7;    color: #fff;}.nav {    display: flex;    justify-content: space-between;    padding: 10px;}

3. 設(shè)置我們需要的天氣數(shù)據(jù)展示的html+css結(jié)構(gòu)，這主要考查的是切頁面能力。

//html 
            
{{}}
            
{{}}
            
                ℃            
            
                風力：{{                }}|                風向：{{ }}|                空氣濕度：{{  }}            
        
        
            
                明天：                白天:{{ }}℃ {{                 }} {{  }}風 {{ }}                  夜間:{{                }}℃ {{  }} {{  }}風 {{ }}                            
            
                后天：                白天:{{ }}℃ {{                 }} {{  }}風 {{  }}                  夜間:{{                 }}℃ {{  }} {{  }}風 {{ }}                            
        
 

//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;    }}

4. 再放一個div用于存放折線圖。

//html
 

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

5. 用watchEffect或onMounted來獲取天氣數(shù)據(jù)。

6. 想要獲取天氣情況我們先要獲得定位，這是需要用到高德地圖API,我們來到這個位置：開發(fā)>地圖 JS API v2.0>教程>服務>定位，找到IP定位獲取當前城市信息。

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

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

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

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

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

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

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

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

把數(shù)據(jù)放到頁面上我理解的是挖坑然后埋數(shù)據(jù)，就像下面這樣：

{{ today.city }}
 
{{ today.weather }}

注意：由于futureData是一個數(shù)組，我們要在它放數(shù)據(jù)的div上加一個v-if="futureData.length > 0"，要不然會報錯。

                明天：白天:{{ futureData[1].dayTemp }}℃ {{ futureData[1].dayWeather}} {{ futureData[1].dayWindDir }}風 {{ futureData[1].dayWindPower }}  夜間:{{ futureData[1].nightTemp }}℃ {{ futureData[1].nightWeather }} {{ futureData[1].nightWindDir }}風 {{ futureData[1].nightWindPower}}                            

10. 接下來我們就來做一個折線圖了，打開ECharts官網(wǎng)，選一個折線圖Examples - Apache ECharts

定義一個方法initEchart來完成圖的繪制（這里定義了一個空數(shù)組來獲取未來幾天的溫度）

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        }

別忘了在裝這幅圖的div上掛一個ref="echartContainer"喲。

這樣就能幫我們初始化一個折線圖了。

11. 最后直接在獲取未來天氣中調(diào)用initEchart就可以了。

部分代碼

<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即為當前所在城市信息                        //console.log(result.city);                        getWeather(result.city)                    }                })            })        })        const getWeather = (cityName) => {            //加載天氣查詢插件            AMap.plugin("AMap.Weather", function () {                //創(chuàng)建天氣查詢實例                var weather = new AMap.Weather();                //執(zhí)行實時天氣信息查詢                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>

本文轉(zhuǎn)載于:

https://juejin.cn/post/7230078695767294013

如果對您有所幫助，歡迎您點個關(guān)注，我會定時更新技術(shù)文檔，大家一起討論學習，一起進步。

標簽：