一個有關ajax去擷取天氣預報然後用echarts展現出來的小demo

來源:互聯網
上載者:User

標籤:length   element   future   lan   poi   $.ajax   legend   lin   資料   

這個是我自己第一次嘗試做的,雖然很粗糙,但是可以給需要的人看一下,初學的人也可以去瞭解一下,

先上一個:

      

 

然後附上代碼:

<!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‘));         // 顯示標題,圖例和空的座標軸         myChart.setOption({             title: {                 text: ‘重慶未來七日溫度‘             },             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: ‘最高點‘                             }]                         ]                     }                 }             ]         });         // 非同步載入資料         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);                 // 填入資料                 myChart.setOption({                     xAxis: {                         data:xqday                     },                     series: [{                         // 根據名字對應到相應的系列                         name: ‘最高氣溫‘,                         data: wdmax                     },{                         name: ‘最低氣溫‘,                         data: wdmin                     }]                 });             }         })     </script></body></html>

  

   這裡的api請求的介面是我在彙總資料申請的免費測試的介面,總共的次數有500次,我寫的時候是重新整理一次就會載入一次,就會去請求一次。

現在剩餘還有400次左右,反正是免費的,所以大家可以自己註冊然後自己查這個api的文檔來自己試一下。

 

 這裡是api文檔:

 

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

一個有關ajax去擷取天氣預報然後用echarts展現出來的小demo

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: