當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

一个有关ajax去获取天气预报然后用echarts展现出来的小demo

發(fā)布時(shí)間：2025/7/14 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了一个有关ajax去获取天气预报然后用echarts展现出来的小demo 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

這個(gè)是我自己第一次嘗試做的，雖然很粗糙，但是可以給需要的人看一下，初學(xué)的人也可以去了解一下，

先上一個(gè)效果圖：

? ? ??

然后附上代碼：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>天氣溫度折線圖-echarts</title><script src="echarts.js" type="text/javascript"></script><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script> </head> <body><div id="main" style="width: 600px;height: 400px;"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));// 顯示標(biāo)題，圖例和空的坐標(biāo)軸myChart.setOption({title: {text: '重慶未來(lái)七日溫度'},tooltip: {},legend: {data:['最高氣溫','最低氣溫']},xAxis: {data: []},yAxis: {type:'value',axisLabel: {formatter: '{value} °C'}},series: [{name: '最高氣溫',type: 'line',data: [],markPoint: {data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: {data: [{type: 'average', name: '平均值'}]}},{name:'最低氣溫',type:'line',data:[],markPoint: {data: [{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}]},markLine: {data: [{type: 'average', name: '平均值'},[{symbol: 'none',x: '90%',yAxis: 'max'}, {symbol: 'circle',label: {normal: {position: 'start',formatter: '最大值'}},type: 'max',name: '最高點(diǎn)'}]]}}]});// 異步加載數(shù)據(jù)var city = "重慶";// $citycode=urlencode(city);url='http://v.juhe.cn/weather/index?format=2&cityname='+'重慶'+'&key=bce44a95809a658b927c0722f2fbbac4';$.ajax({url:url,type:"get",async:false,dataType:"jsonp",data:{location:city},success:function (wddata) {var wdlist=wddata.result.future;console.log(wddata);var wdmin=[];var wdmax=[];var xqday=[];for(var i=0;i<wdlist.length;i++){var wd=wddata.result.future[i].temperature;var xq=wddata.result.future[i].week;xqday.push(xq);var arr=wd.split("~");var min=arr[0].split("℃")[0];var max=arr[1].split("℃")[0];console.log(min);console.log(max);wdmin.push(min);wdmax.push(max);}console.log(wdmin);console.log(wdmax);// 填入數(shù)據(jù)myChart.setOption({xAxis: {data:xqday},series: [{// 根據(jù)名字對(duì)應(yīng)到相應(yīng)的系列name: '最高氣溫',data: wdmax},{name: '最低氣溫',data: wdmin}]});}})</script></body> </html>

? ?這里的api請(qǐng)求的接口是我在聚合數(shù)據(jù)申請(qǐng)的免費(fèi)測(cè)試的接口，總共的次數(shù)有500次，我寫的時(shí)候是刷新一次就會(huì)加載一次，就會(huì)去請(qǐng)求一次。

現(xiàn)在剩余還有400次左右，反正是免費(fèi)的，所以大家可以自己注冊(cè)然后自己查這個(gè)api的文檔來(lái)自己試一下。

?這里是api文檔：

?大家有興趣的可以去了解一下。

轉(zhuǎn)載于:https://www.cnblogs.com/justyouadmin/p/9591743.html

總結(jié)

以上是生活随笔為你收集整理的一个有关ajax去获取天气预报然后用echarts展现出来的小demo的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。