鍵.png)
GraphRAG：基于PolarDB+通義千問api+LangChain的知識圖譜定制實踐
API賬號，選擇開發(fā)支，持地圖 JS API。
將vue的一些默認組件和樣式刪除，在views下新建一個Index.vue，并且在index.js下配置路由。目錄結(jié)構(gòu)如下所示：
開始（細分11步）
<script>引入到index.html中，將你自己申請的key值和安全密鑰粘貼到里面去。這樣就可以使用高德地圖 JS API?開發(fā)地圖應(yīng)用。 //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結(jié)構(gòu)，這主要考查的是切頁面能力。//html
<div class="city-info">
<p class="city">{{}}</p>
<p class="weather">{{}}</p>
<h2 class="temp">
<em></em>℃
</h2>
<div class="detail">
<span>風(fēng)力：{{
}}</span>|
<span>風(fēng)向：{{ }}</span>|
<span>空氣濕度：{{ }}</span>
</div>
</div>
<div class="future">
<div class="group" v-if="futureData.length > 0">
明天：
<span class="tm">白天:{{ }}℃ {{
}} {{ }}風(fēng) {{ }} </span>
<span class="tm"> 夜間:{{
}}℃ {{ }} {{ }}風(fēng) {{
}}
</span>
</div>
<div class="group" v-if="futureData.length > 0">
后天：
<span class="tm">白天:{{ }}℃ {{
}} {{ }}風(fēng) {{ }} </span>
<span class="tm"> 夜間:{{
}}℃ {{ }} {{ }}風(fēng) {{
}}
</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;
}
}//html
<div class="echart-container"> </div>//css
.echart-container {
width: 100%;
height: 50vh;
}想要獲取天氣情況我們先要獲得定位，這是需要用到高德地圖API,我們來到這個位置：開發(fā)?>?地圖 JS API v2.0?>?教程?>?服務(wù)?>?定位，找到IP定位獲取當(dāng)前城市信息。
將這段代碼復(fù)制到onMounted的回調(diào)函數(shù)中，這樣我們就能獲取到定位信息。
接下來就可以來獲取天氣了，我們把獲取天氣封裝成一個函數(shù)getWeather。同樣的我們來到：開發(fā) > 地圖 JS API v2.0 > 教程 > 服務(wù) > 天氣，找到實時天氣查詢。
把上圖中的代碼復(fù)制到獲取天氣的函數(shù)中，并將它放在獲取定位成功后執(zhí)行，傳入定位的城市，這樣就可以獲得定位的城市的天氣情況了。
weather.getForecast('cityName', function(err, data) {
console.log(err, data); });注意：此時輸出的未來天氣是一個數(shù)組。
我們已經(jīng)獲取到了天氣數(shù)據(jù)了，接下來就要把這些數(shù)據(jù)存起來，把它變成響應(yīng)式的，然后把它放到頁面上展示出來。
const state = reactive({
today: {},
futureData: [],
})
state.today = data
state.futureData = data.forecasts
return {
...toRefs(state),
}把數(shù)據(jù)放到頁面上我理解的是挖坑然后埋數(shù)據(jù)，就像下面這樣：
<p class="city">{{ today.city }}</p>
<p class="weather">{{ today.weather }}</p>注意：由于futureData是一個數(shù)組，我們要在它放數(shù)據(jù)的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 }}風(fēng) {{ futureData[1].dayWindPower }} </span>
<span class="tm"> 夜間:{{ futureData[1].nightTemp }}℃ {{ futureData[1].nightWeather }} {{ futureData[1].nightWindDir }}風(fēng) {{ futureData[1].nightWindPower
}}
</span>
</div>接下來我們就來做一個折線圖了，打開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"喲。
這樣就能幫我們初始化一個折線圖了。
最后直接在獲取未來天氣中調(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即為當(dāng)前所在城市信息
//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>ECharts中的一些圖表是很好用的，我們可以自己動手多去嘗試嘗試。未來的學(xué)習(xí)之旅還很長，對于數(shù)據(jù)的可視化我們還可以做成3D的效果。本文如有錯失，歡迎大家指正，最后感謝大家的觀看。
文章轉(zhuǎn)自微信公眾號@新中地教育
