echarts根据此网址https://query.asilu.com/weather/baidu的数据做天气预报折线图
时间: 2023-08-04 14:04:46 浏览: 120
要使用ECharts绘制天气预报折线图,可以通过Ajax获取数据,然后使用ECharts的API绘制折线图。以下是一个示例代码,可以根据你的实际需求进行修改:
```javascript
// 初始化折线图
var chart = echarts.init(document.getElementById('weather-chart'));
// 发送Ajax请求获取数据
$.ajax({
type: 'GET',
url: 'https://query.asilu.com/weather/baidu',
dataType: 'json',
success: function(data) {
// 处理数据
var days = [];
var highs = [];
var lows = [];
for (var i = 0; i < data.length; i++) {
var day = data[i].date.substring(5);
var high = parseInt(data[i].high.substr(3));
var low = parseInt(data[i].low.substr(3));
days.push(day);
highs.push(high);
lows.push(low);
}
// 设置折线图的配置项
var option = {
title: {
text: '天气预报',
left: 'center'
},
xAxis: {
type: 'category',
data: days
},
yAxis: {
type: 'value',
min: Math.min.apply(null, lows) - 5,
max: Math.max.apply(null, highs) + 5
},
series: [{
data: highs,
type: 'line',
name: '最高气温'
}, {
data: lows,
type: 'line',
name: '最低气温'
}]
};
// 使用配置项绘制折线图
chart.setOption(option);
},
error: function(xhr, status, error) {
console.log(error);
}
});
```
在上面的代码中,使用了jQuery的ajax函数发送了一个GET请求,获取了天气预报数据。然后,处理数据,将日期、最高气温和最低气温分别存放在三个数组中。接着,根据数据设置折线图的配置项,并使用ECharts的API绘制折线图。最后,将折线图显示在页面上。