手把手教你Vue+ECharts+高德地圖API實現

手把手教你Vue+ECharts+高德地圖API實現天氣預報數據可視化

言

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

準備工作

注冊一個高德地圖API賬號，選擇開發支持，地圖 JS API。

登錄控制臺成為開發者并創建 key。

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

創建一個vue項目，將vue的一些默認組件和樣式刪除，在views下新建一個Index.vue，并且在index.js下配置路由。目錄結構如下所示：

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

開始（細分11步）

將準備工作第三步找到的方式二的兩個<script>引入到index.html中，將你自己申請的key值和安全密鑰粘貼到里面去。這樣就可以使用高德地圖 JS API 開發地圖應用。
設置頭部樣式和背景色，時間和切換城市用到了彈性布局。

ini復制代碼  //html
  <div class="container">
        <div class="nav">
            <div class="time">7:41</div>
            <div class="city">切換城市</div>
        </div>
  <div>

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

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

設置我們需要的天氣數據展示的html+css結構，這主要考查的是切頁面能力。

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

css復制代碼//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;

    }
}

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

arduino復制代碼//html
<div class="echart-container"> </div>

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

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

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

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

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

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

javascript復制代碼weather.getForecast('cityName', function(err, data) {
console.log(err, data); });

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

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

ini復制代碼 const state=reactive({
            today: {},
            futureData: [],
        })
        
  state.today=data
  state.futureData=data.forecasts
   return {
            ...toRefs(state),
        }

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

ini復制代碼 <p class="city">{{ today.city }}</p>
 <p class="weather">{{ today.weather }}</p>

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

css復制代碼<div class="group" v-if="futureData.length > 0">
                明天：
<span class="tm">白天:{{ futureData[1].dayTemp }}℃ {{ futureData[1].dayWeather}} {{ futureData[1].dayWindDir }}風 {{ futureData[1].dayWindPower }} </span>
<span class="tm"> 夜間:{{ futureData[1].nightTemp }}℃ {{ futureData[1].nightWeather }} {{ futureData[1].nightWindDir }}風 {{ futureData[1].nightWindPower
}}
                </span>
            </div>

接下來我們就來做一個折線圖了，打開ECharts官網，選一個折線圖Examples - Apache ECharts

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

kotlin復制代碼  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"喲。

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

最后直接在獲取未來天氣中調用initEchart就可以了。

部分代碼

xml復制代碼<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 () {
                //創建天氣查詢實例
                var weather=new AMap.Weather();

                //執行實時天氣信息查詢
                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>

結語

ECharts中的一些圖表是很好用的，我們可以自己動手多去嘗試嘗試。未來的學習之旅還很長，對于數據的可視化我們還可以做成3D的效果。本文如有錯失，歡迎大家指正，最后感謝大家的觀看，點個免費的贊吧??。

作者：一拾九
鏈接：https://juejin.cn/post/7230078695767294013

言

在現代的軟件開發中，API 扮演著至關重要的角色。通過API，開發者可以將外部的服務或數據集成到自己的應用程序中，極大地豐富了應用程序的功能和用戶體驗。本文將介紹如何接入一個天氣預報查詢API，以便在自己的項目中展示實時的天氣信息。

1. 了解API

在開始編碼之前，首先需要了解所要接入的天氣預報API。通常，API提供商會提供一個開發者文檔，其中包含了API的基本信息、請求方式、參數、響應格式等重要內容。仔細閱讀文檔，了解如何獲取API訪問密鑰（API Key），以及如何構建請求URL。

2. 獲取API訪問密鑰

大多數API都需要一個訪問密鑰來驗證請求的合法性。訪問API提供商的官方網站，注冊賬號，并按照指引獲取API訪問密鑰。請妥善保管好這個密鑰，不要泄露給他人。例如 APISpace 的天氣預報查詢。

https://www.apispace.com/eolink/api/456456/introduction?utm_source=tth&utm_content=deep&utm_term=tqcx

注冊了 APISpace 之后，我們可以在控制臺的訪問設置中，查看自己的API密鑰（token）。

3. 構建請求URL

根據API文檔，使用API訪問密鑰和必要的參數（例如，查詢的地理位置）來構建請求URL。例如，如果要查詢北京今天的天氣，請求URL如下所示，以 APISpace 為例：

https://www.apispace.com/eolink/api/456456/introduction?utm_source=tth&utm_content=deep&utm_term=tqcx

https://eolink.o.apispace.com/456456/weather/v001/now?areacode=101010100

這里的 areacode 請求參數表示的是城市ID，大家可以在天氣預報查詢介紹頁中相關文件的文檔中查看。

或者是用城市搜索API 查詢想要的城市ID。

4. 發送請求并處理響應

使用編程語言（如Python、JavaScript等）發送HTTP請求到構建好的URL，并處理返回的響應數據。以下是一個簡單的 Python 示例：

import requests

url="https://eolink.o.apispace.com/456456/weather/v001/now"

# 城市ID和經緯度，二選一查詢
payload={"areacode" : "101010100","lonlat" : "116.407526,39.904030"}

headers={
    "X-APISpace-Token":"API密鑰，登錄APISpace即可獲得"
}

response=requests.request("GET", url, params=payload, headers=headers)

# 提取并展示天氣預報信息
print(response.text)

5. 錯誤處理和優化

在實際應用中，還需要考慮錯誤處理和優化。例如，如果網絡請求失敗或者API返回錯誤代碼，應該給出相應的錯誤提示。此外，可以考慮將API請求的結果緩存起來，以減少不必要的網絡請求和提高應用的響應速度。

6. 遵守法律法規

在接入和使用API時，務必遵守相關的法律法規，尊重用戶隱私，不非法獲取、使用用戶數據。

通過以上步驟，您就可以成功接入一個天氣預報查詢API，并在自己的項目中展示實時的天氣信息了。記得在實際開發中，要根據API提供商的具體要求和文檔來調整代碼和邏輯。

、搜索天氣預報API接口

百度天氣預報API接口地址：http://developer.baidu.com/map/carapi-7.htm

① 請求地址最少需要3個參數, ak(開發者密鑰)、location(請求的城市名稱)、output(返回的數據傳輸格式, 默認為xml)

② 又由于當我們在瀏覽器中輸入示例url, 可以正常返回數據, 所以代表當前請求是HTTP中的get請求,

所以我們可以使用PHP5中的file_get_contents來模擬發送get請求。

2、編寫PHP代碼

要用到的知識點：simplexml_load_string, 代表把一個xml格式的字符串載入到內存, 生成SimpleXML對象。

在線咨詢

上一篇：Web前端工作中常見的div+css錯誤
下一篇：提取頭條HTML內容失敗的情況在現代數字環境中并不罕

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商