四、项目案例 - 天气变化图
1. 实现效果
首先通过正向地址解析接口，根据城市名称获得经纬度。然后调用获取7日天气预报接口获得天气数据，再通过Echarts进行可视化展示。
2. index.html
Tips：前文中的签名工具代码对应toos.js。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>天气查询</title> <!-- Start 引入计算sign所需js库文件 Start --> <script src="js/core-min.js" type="text/javascript" charset="utf-8"></script> <script src="js/hmac-min.js" type="text/javascript" charset="utf-8"></script> <script src="js/sha256-min.js" type="text/javascript" charset="utf-8"></script> <!-- End 引入计算sign所需js库文件 End --> <script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/tool.js" type="text/javascript" charset="utf-8"></script> <script src="js/index.js" type="text/javascript" charset="utf-8"></script> </head> <body style="text-align: center;"> <span>请输入城市：</span><input type="text" id="city" style="font-size: 1rem;" /> <input type="button" id="address" value="天气查询" style="font-size: 1rem;" /> <br /><br /> <div id="main" style="height: 37.5rem;width: 56.25rem;margin: 0 auto;"></div> </body> </html>
3. index.js
var accessToken = ""; // 日期格式化函数 function timeFormat(time) { var date = new Date(time); var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1; var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate(); return month + "-" + day; } $(function() { // 页面加载后自动获取token if (accessToken == "") { accessToken = getToken(); } $("#address").on("click", function() { var city = $("#city").val(); if ($.trim(city) == "") { alert("地址不能为空"); return; } var query = "address=" + city; var path = "v1.0/iot-03/geocode-cities/address"; timestamp = new Date().getTime(); var settings = { "url": host + "/" + path + "?" + query, "method": "GET", "timeout": 0, "headers": { "client_id": clientId, "sign": getSignService(accessToken, query, path), "t": timestamp, "sign_method": sign_method, "access_token": accessToken } }; // 调用地址解析接口获取坐标 $.ajax(settings).done(function(response) { var lat = response.result.latitude; var lon = response.result.longitude; var query = "lat=" + lat + "&lon=" + lon; var path = "v2.0/iot-03/weather/forecast/daily"; timestamp = new Date().getTime(); var settings = { "url": host + "/" + path + "?" + query, "method": "GET", "timeout": 0, "headers": { "client_id": clientId, "sign": getSignService(accessToken, query, path), "t": timestamp, "sign_method": sign_method, "access_token": accessToken } }; // 调用天气接口获取未来一周天气情况 $.ajax(settings).done(function(response) { var xAxisData = []; var maxSeriesData = []; var minSeriesData = []; // 解析数据，准备填充Echarts图表 for (var item of response.result.data) { xAxisData.push(timeFormat(item.time)); maxSeriesData.push(parseFloat(item.temperature_max.Value).toFixed( 1)); minSeriesData.push(parseFloat(item.temperature_min.Value).toFixed( 1)); } // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: (city.indexOf("市") == -1 ? city + "市" : city) + " - 未来7天温度变化", left: 'center' }, tooltip: { trigger: 'axis' }, legend: { left: 'right' }, grid: { top: "15%" }, xAxis: { type: 'category', boundaryGap: false, data: xAxisData }, yAxis: { type: 'value', axisLabel: { formatter: '{value} °C' } }, series: [{ name: '最高温度', type: 'line', data: maxSeriesData, markPoint: { data: [{ type: 'max', name: 'Max' }, { type: 'min', name: 'Min' } ] }, markLine: { data: [{ type: 'average', name: 'Avg' }] } }, { name: '最低温度', type: 'line', data: minSeriesData, markPoint: { data: [{ type: 'max', name: 'Max' }, { type: 'min', name: 'Min' } ] }, markLine: { data: [{ type: 'average', name: 'Avg' }] } } ] }; myChart.setOption(option); }); }); }); })
4. 完整案例源码
五、视频直达
视频地址：https://www.bilibili.com/video/BV1Wg411w7mE/，喜欢的小伙伴儿一定要三连加关注哦~
免费好用的天气服务 - Tuya
写在结尾：作者力求做到将每个知识点细化，并且对于有关联的知识点都会使用传送门挂载链接。文章采用：“文字 + 配图 + 视频”的方式来进行展现，均是挤时间所作，希望看到这里能留下评论点个赞，略表支持！
