這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
前言
所謂資料可視化，我們可以理解為從宏觀角度來看一眼就能看出來整個資料的占比，走向，對于資料可視化，很多互聯網公司是很看重這一塊的，包括大廠；就比如阿里的淘寶，雙十一的時候往往就需要將消費者的一些資料通過圖的形式展現出來，接下來我們就來實作一個天氣的資料可視化（移動端開發），看如下效果圖（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開發地圖應用， -
設定頭部樣式和背景色，時間和切換城市用到了彈性布局，
//html
<div >
<div >
<div >7:41</div>
<div >切換城市</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+css結構，這主要考查的是切頁面能力，
//html
<div >
<p >{{}}</p>
<p >{{}}</p>
<h2 >
<em></em>℃
</h2>
<div >
<span>風力：{{
}}</span>|
<span>風向：{{ }}</span>|
<span>空氣濕度：{{ }}</span>
</div>
</div>
<div >
<div v-if="futureData.length > 0">
明天：
<span >白天:{{ }}℃ {{
}} {{ }}風 {{ }} </span>
<span > 夜間:{{
}}℃ {{ }} {{ }}風 {{
}}
</span>
</div>
<div v-if="futureData.length > 0">
后天：
<span >白天:{{ }}℃ {{
}} {{ }}風 {{ }} </span>
<span > 夜間:{{
}}℃ {{ }} {{ }}風 {{
}}
</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;
}
}
- 再放一個
div用于存放折線圖，
//html <div > </div>
//css
.echart-container {
width: 100%;
height: 50vh;
}
-
用
watchEffect或onMounted來獲取天氣資料， -
想要獲取天氣情況我們先要獲得定位，這是需要用到高德地圖
API,我們來到這個位置：開發 > 地圖 JS API v2.0 > 教程 > 服務 > 定位，找到IP定位獲取當前城市資訊，
將這段代碼復制到
onMounted的回呼函式中，這樣我們就能獲取到定位資訊，
- 接下來就可以來獲取天氣了，我們把獲取天氣封裝成一個函式
getWeather，同樣的我們來到：開發 > 地圖 JS API v2.0 > 教程 > 服務 > 天氣，找到實時天氣查詢，
把上圖中的代碼復制到獲取天氣的函式中，并將它放在獲取定位成功后執行，傳入定位的城市，這樣就可以獲得定位的城市的天氣情況了，
- 同樣的，我們來獲取未來幾天的天氣情況，通過下面的代碼就可以獲取到，
weather.getForecast('cityName', function(err, data) {
console.log(err, data); });
注意：此時輸出的未來天氣是一個陣列，
- 我們已經獲取到了天氣資料了，接下來就要把這些資料存起來，把它變成回應式的，然后把它放到頁面上展示出來，
const state = reactive({
today: {},
futureData: [],
})
state.today = data
state.futureData = https://www.cnblogs.com/smileZAZ/archive/2023/06/03/data.forecasts
return {
...toRefs(state),
}
把資料放到頁面上我理解的是挖坑然后埋資料，就像下面這樣：
<p >{{ today.city }}</p>
<p >{{ today.weather }}</p>
注意：由于futureData是一個陣列，我們要在它放資料的div上加一個v-if="futureData.length > 0"，要不然會報錯，
<div v-if="futureData.length > 0">
明天：
<span >白天:{{ futureData[1].dayTemp }}℃ {{ futureData[1].dayWeather}} {{ futureData[1].dayWindDir }}風 {{ futureData[1].dayWindPower }} </span>
<span > 夜間:{{ futureData[1].nightTemp }}℃ {{ futureData[1].nightWeather }} {{ futureData[1].nightWindDir }}風 {{ futureData[1].nightWindPower
}}
</span>
</div>
- 接下來我們就來做一個折線圖了，打開
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"喲，
這樣就能幫我們初始化一個折線圖了，
- 最后直接在獲取未來天氣中呼叫
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 = https://www.cnblogs.com/smileZAZ/archive/2023/06/03/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
如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/554239.html
標籤：其他
上一篇：從0搭建Vue3組件庫(十三):引入Husky規范git提交
下一篇：返回列表