一个有关ajax去获取天气预报然后用echarts展现出来的小demo-优快云博客

本文介绍如何使用ECharts绘制天气温度折线图，包括设置标题、图例及坐标轴等，并通过API获取重庆未来七天的温度数据进行展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

先上一个效果图：

然后附上代码：

<!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的文档来自己试一下。