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

来源:https://www.cnblogs.com/smileZAZ/archive/2023/06/03/17454386.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 前言 所謂數據可視化,我們可以理解為從巨集觀角度來看一眼就能看出來整個數據的占比,走向。對於數據可視化,很多互聯網公司是很看重這一塊的,包括大廠;就比如阿裡的淘寶,雙十一的時候往往就需要將消費者的一些數據通過圖的形式展現出來。接下來我們就來 ...


這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助

前言

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

2.png

準備工作

  1. 註冊一個高德地圖API賬號,選擇開發支持,地圖 JS API

3.png

  1. 登錄控制台成為開發者並創建 key

image.png

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

WM{U}7_Y[9HC~}H6%2$S{]J.png

  1. 創建一個vue項目,將vue的一些預設組件和樣式刪除,在views下新建一個Index.vue,並且在index.js下配置路由。目錄結構如下所示:

7.png

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

開始(細分11步)

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

  2. 設置頭部樣式和背景色,時間和切換城市用到了彈性佈局。

  //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;
}
  1. 設置我們需要的天氣數據展示的html+css結構,這主要考查的是切頁面能力。
 //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
.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;

    }
}
  1. 再放一個div 用於存放折線圖。
//html
<div class="echart-container"> </div>
//css
.echart-container {
    width: 100%;
    height: 50vh;
}
  1. watchEffectonMounted來獲取天氣數據。

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

8.png 將這段代碼複製到onMounted的回調函數中,這樣我們就能獲取到定位信息。

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

9.png

把上圖中的代碼複製到獲取天氣的函數中,並將它放在獲取定位成功後執行,傳入定位的城市,這樣就可以獲得定位的城市的天氣情況了。

  1. 同樣的,我們來獲取未來幾天的天氣情況,通過下麵的代碼就可以獲取到。
weather.getForecast('cityName', function(err, data) {
console.log(err, data); });

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

  1. 我們已經獲取到了天氣數據了,接下來就要把這些數據存起來,把它變成響應式的,然後把它放到頁面上展示出來。
 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>

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

<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>
  1. 接下來我們就來做一個折線圖了,打開ECharts官網,選一個折線圖Examples - Apache ECharts

定義一個方法initEchart來完成圖的繪製(這裡定義了一個空數組來獲取未來幾天的溫度)

  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"喲。

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

  1. 最後直接在獲取未來天氣中調用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 () {
                //創建天氣查詢實例
                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>

本文轉載於:

https://juejin.cn/post/7230078695767294013

如果對您有所幫助,歡迎您點個關註,我會定時更新技術文檔,大家一起討論學習,一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 目錄 一、grep查找文件內容 二、sort排序 三、uniq統計壓縮重覆 四、tr替換壓縮 五、cut截斷 六.sqlit拆分 七.paste合併 八.eval 一、grep(匹配文件內容) grep [選項]… 查找條件 目標文件 -m 匹配次數 -v 除什麼以外 -i 忽略大小寫 -n 顯示匹 ...
  • nginx.conf中有關訪客日誌定義如下 #log_format #創建日誌格式,名為main log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$h ...
  • 上周聽到公司同事分享 MySQL 同步數據到 ES 的方案,發現很有意思,感覺有必要將這塊知識點再總結提煉一下,就有了這篇文章。 本文會先講述數據同步的 4 種方案,並給出常用數據遷移工具,乾貨滿滿! 不 BB,上文章目錄: 1. 前言 在實際項目開發中,我們經常將 MySQL 作為業務資料庫,ES ...
  • 具象化理解資料庫的三級模式及二級映像 形象一點來說,把數據看做貨物,資料庫是倉庫,模式就是表格。 你有一個倉庫,倉庫里成千上萬的貨物,隨便你怎麼堆,你堆個正方體,堆個圓柱體,甚至隨便亂堆都行,你怎麼堆的叫內模式。 完事你寫了一張表,表上對全部貨物按某個標準分類,而且標清了啥貨物在哪(這個操作就是從內 ...
  • MySQL索引長度(key_len)計算 計算規則 索引欄位:沒有設置 NOT NULL,則需要加 1 個位元組。 定長欄位:tinyint 占 1 個位元組、int 占 4個位元組、bitint 占 8 個位元組、date 占 3個位元組、datetime 占 5 個位元組、char(n) 占 n 個位元組。 ...
  • ![](https://img2023.cnblogs.com/blog/3076680/202306/3076680-20230602231102469-1389179464.png) # 1. 基礎思想 ## 1.1. 預寫日誌記錄 ## 1.2. 兩階段提交 ## 1.3. 關係資料庫 # 2 ...
  • 有很多朋友對中國文化歷史相關的數據感興趣,現有的中華上下五千年、世界五千年這類的數據記錄數還太少太少,於是今天就採集了一個中華歷史網站,共有效採集到近8萬條記錄。 分類彙總情況:野史秘聞(12273)、歷史人物(8840)、歷史雜談(7928)、文史百科(5635)、歷史趣聞(5282)、雜說歷史( ...
  • 原文地址: [Android Studio歷史版本下載地址彙總 - Stars-One的雜貨小窩](https://stars-one.site/2023/06/03/android-studio-version-list) > 由於新公司不給自帶電腦,然後給了台新的電腦,於是就是需要重新下載And ...
一周排行
    -Advertisement-
    Play Games
  • Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程,Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor,topic=orders 本文前提知識:熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • 引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識,這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示,用於衡量代碼被測試覆蓋的程度,幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率(Line Coverage)、分支覆蓋率(Bra ...
  • 前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫,記錄了使用電腦模擬,模擬PLC,自至完成測試的詳細流程,並重點介紹了在這個過程中的易錯點,供參考。 用到的軟體: 1.Windows環境下鏈路層網路訪問的行業標準工具(WinPcap_4_1_3.exe)下載鏈接:http ...
  • 從依賴倒置原則(Dependency Inversion Principle, DIP)到控制反轉(Inversion of Control, IoC)再到依賴註入(Dependency Injection, DI)的演進過程,我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • 關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制,這與其他面相對對象語言有區別。關於私有屬性和私有方法,有如下要點: 1、通常我們約定,兩個下劃線開頭的屬性是私有的(private)。其他為公共的(public); 2、類內部可以訪問私有屬性(方法); 3、類外 ...
  • C++ 訪問說明符 訪問說明符是 C++ 中控制類成員(屬性和方法)可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符: public:允許從類外部的任何地方訪問成員。 private:僅允許在類內部訪問成員。 protected:允許在類內部及其派生類中訪問成員。 示 ...
  • 寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先,【static_cast,dynamic_cast】【父類指針,子類指針】,兩兩一組,共有4種組合:用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • 相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage,將包下的類按照一定規則註冊成Be ...
  • 操作系統 :CentOS 7.6_x64 opensips版本: 2.4.9 python版本:2.7.5 python作為腳本語言,使用起來很方便,查了下opensips的文檔,支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...