這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 前言 所謂數據可視化，我們可以理解為從巨集觀角度來看一眼就能看出來整個數據的占比，走向。對於數據可視化，很多互聯網公司是很看重這一塊的，包括大廠；就比如阿裡的淘寶，雙十一的時候往往就需要將消費者的一些數據通過圖的形式展現出來。接下來我們就來 ...
這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
前言
所謂數據可視化，我們可以理解為從巨集觀角度來看一眼就能看出來整個數據的占比，走向。對於數據可視化，很多互聯網公司是很看重這一塊的，包括大廠；就比如阿裡的淘寶，雙十一的時候往往就需要將消費者的一些數據通過圖的形式展現出來。接下來我們就來實現一個天氣的數據可視化（移動端開發），看如下效果圖（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 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+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;
}
}
- 再放一個
div用於存放折線圖。
//html <div class="echart-container"> </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 = 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>
- 接下來我們就來做一個折線圖了，打開
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 = 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
如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。
