用ECharts调用jquery的ajax方法,查询15天气信息。API接口地址: http://t.weather.sojson.com/api/weather/city/101191101,其中101191101代表常州市。 部分测试城市代号如下,将其放到下拉框中,选择显示该城市的15天天气: 101010100,北京 101020100,上海 101190401,苏州 101190201,无锡 101190101,南京 101190601,扬州 101190301,镇江 101240501,宜春 101070101,沈阳 101070601,丹东 101080701,鄂尔多斯 101081001,呼伦贝尔 101160701,张掖 101280101,广州 101280601,深圳 101300501,桂林 101300101,南宁 101260801,六盘水 101260506,黔东南 101260201,遵义 101310101,海口 101310201,三亚 101310222,五指山 101180801,开封 101180901,洛阳 101251101,张家界 101221001,黄山 101320101,香港 101330101,澳门
时间: 2023-06-14 22:02:41 浏览: 154
Jquery获取当前城市的天气信息
首先,我们需要在 HTML 中创建一个下拉框,包含各个城市的代号。然后,当用户选择其中一个城市时,我们需要使用 jQuery 中的 Ajax 方法调用 API 接口,同时将城市代码作为参数传递给 API。在 API 返回结果后,我们需要使用 ECharts 将数据以柱状图的形式展示出来。
以下是一个简单的实现示例:
HTML 代码:
```html
<select id="city">
<option value="101010100">北京</option>
<option value="101020100">上海</option>
<option value="101190401">苏州</option>
<option value="101190201">无锡</option>
<option value="101190101">南京</option>
<option value="101190601">扬州</option>
<option value="101190301">镇江</option>
<option value="101240501">宜春</option>
<option value="101070101">沈阳</option>
<option value="101070601">丹东</option>
<option value="101080701">鄂尔多斯</option>
<option value="101081001">呼伦贝尔</option>
<option value="101160701">张掖</option>
<option value="101280101">广州</option>
<option value="101280601">深圳</option>
<option value="101300501">桂林</option>
<option value="101300101">南宁</option>
<option value="101260801">六盘水</option>
<option value="101260506">黔东南</option>
<option value="101260201">遵义</option>
<option value="101310101">海口</option>
<option value="101310201">三亚</option>
<option value="101310222">五指山</option>
<option value="101180801">开封</option>
<option value="101180901">洛阳</option>
<option value="101251101">张家界</option>
<option value="101221001">黄山</option>
<option value="101320101">香港</option>
<option value="101330101">澳门</option>
</select>
<div id="chart" style="width: 600px; height: 400px;"></div>
```
JavaScript 代码:
```javascript
// 获取下拉框和图表元素
var citySelect = $('#city');
var chartElem = echarts.init(document.getElementById('chart'));
// 监听下拉框选择事件
citySelect.change(function() {
// 获取选择的城市代码
var cityCode = $(this).val();
// 发送 API 请求
$.ajax({
url: 'http://t.weather.sojson.com/api/weather/city/' + cityCode,
dataType: 'json',
success: function(result) {
// 解析 API 返回的数据
var data = [];
var days = result.data.forecast.slice(0, 15);
for (var i = 0; i < days.length; i++) {
data.push({
value: [days[i].date, Number(days[i].high.slice(3, -1))]
});
}
// 渲染图表
chartElem.setOption({
xAxis: {
type: 'category'
},
yAxis: {
type: 'value'
},
series: {
type: 'bar',
data: data
}
});
}
});
});
```
这段代码实现了以下功能:
1. 获取下拉框和图表元素;
2. 监听下拉框选择事件;
3. 获取选择的城市代码;
4. 发送 API 请求,获取该城市的天气信息;
5. 解析 API 返回的数据,提取最近 15 天的天气信息;
6. 渲染图表,将天气数据以柱状图形式展示出来。
阅读全文