这个是我自己第一次尝试做的，虽然很粗糙，但是可以给需要的人看一下，初学的人也可以去了解一下，
先上一个效果图：
然后附上代码：
<!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
原文地址：https://www.cnblogs.com/justyouadmin/p/9591743.html