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

这个是我自己第一次尝试做的，虽然很粗糙，但是可以给需要的人看一下，初学的人也可以去了解一下，

先上一个效果图：

然后附上代码：

<!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文档：

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

转载于:https://www.cnblogs.com/justyouadmin/p/9591743.html

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

ajax动态获取后台数据绘制echarts图表
Echarts是一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻 ...
用vue2.6实现一个抖音很火的【时间轮盘】屏保小DEMO
写在前面: 前段时间看抖音,有人用时间轮盘作为动态的桌面壁纸,一时间成为全网最火的电脑屏保,后来小米等运用市场也出现了[时间轮盘],有点像五行八卦,感觉很好玩,于是突发奇想,自己写一个网页版小DEMO ...
html ajax实现ntlm,从一个AJAX POST获取NTLM挑战只需一页
在这里颇为神秘.我有一个使用Windows身份验证的ASP.NET MVC 4 Web应用程序,已经维护了18个月以上,没有问题.最近,它被部署到一个新的网站,我遇到了以下非常奇怪的行为.从一个AJA ...
php 开发一个聊天系统,ajax+php 实现一个简单的在线聊天室功能（附带源码）
通过ajax和setInterval()函数,配合php+mysql实现一个简单的在线聊天室的功能.附带详细源码案例.这个聊天室是一个简单的聊天室,通过javascript setInterval() ...
Postman接口测试工具学习笔记（二）Postman进阶实践：获取天气预报实例
Postman接口测试工具学习笔记(一) 入门及基本概念 https://blog.csdn.net/sevensolo/article/details/87208546 Postman进阶实践:获取 ...
ajax异步获取右侧html,Ajax异步获取html数据中包含js方法无效的解决方法
Ajax异步获取html数据中包含js方法无效的解决方法页面上使用js写了一个获取后台数据的方法 function data() { var tab = $("#dic") $. ...
爬虫获取天气预报并可视化
重庆交通大学期末大作业实验课程名称:网络通信编程学院:信息科学与工程学院班级:物联网1901 姓名:许俊学号:631907090127 实验类型:综合性,设计性指导教师:娄路开课时间:2 ...
java 天气爬虫_java网页爬虫简单实例详解——获取天气预报。
[本文介绍] 爬取别人网页上的内容,听上似乎很有趣的样子,只要几步,就可以获取到力所不能及的东西,例如呢?例如天气预报,总不能自己拿着仪器去测吧!当然,要获取天气预报还是用webService好.这里 ...
BOS项目02_02_zTree-通过ajax的获取菜单数据、监听树形菜单的点击事件、读取json文件、Ajax获取数据
系列文章目录文章目录系列文章目录前言一.发送ajax网络请求获取菜单数据二.监听树形菜单的点击事件总结前言一.发送ajax网络请求获取菜单数据我们现在的数是写死的,那么实际项目中我们 ...

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

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

最新文章

热门文章