標籤：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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
