【echarts天气预报】实现效果如图：
echarts官网地址：天气预报
原数据
文章图片
需要更改数据结构
handleCommon() {
// 可以引入多个icon
var weatherIcons = {
Sunny: './data/asset/img/weather/sunny_128.png',
Cloudy: './data/asset/img/weather/cloudy_128.png',
Showers: './data/asset/img/weather/showers_128.png',
}
var data = https://www.it610.com/article/[
{
CODE_N:'yun',
ZGWD: '34℃',
TXT_N: '多云转晴',
XZQHMC: '辛集',
TXT_D: '多云转晴',
ZDWD: '22℃',
RQ: '2019-07-12',
CODE_D: 'yun',
},
{
CODE_N: 'yun',
ZGWD: '35℃',
TXT_N: '多云转晴',
XZQHMC: '辛集',
TXT_D: '多云转晴',
ZDWD: '24℃',
RQ: '2019-07-13',
CODE_D: 'yun',
},
{
CODE_N: 'yun',
ZGWD: '36℃',
TXT_N: '多云',
XZQHMC: '辛集',
TXT_D: '多云',
ZDWD: '25℃',
RQ: '2019-07-14',
CODE_D: 'yun',
},
{
CODE_N: 'yun',
ZGWD: '35℃',
TXT_N: '多云',
XZQHMC: '辛集',
TXT_D: '多云',
ZDWD: '24℃',
RQ: '2019-07-15',
CODE_D: 'yun',
},
{
CODE_N: 'yin',
ZGWD: '32℃',
TXT_N: '阴',
XZQHMC: '辛集',
TXT_D: '阴',
ZDWD: '25℃',
RQ: '2019-07-16',
CODE_D: 'yin',
},
{
CODE_N: 'lei',
ZGWD: '32℃',
TXT_N: '阴转雷阵雨',
XZQHMC: '辛集',
TXT_D: '阴转雷阵雨',
ZDWD: '24℃',
RQ: '2019-07-17',
CODE_D: 'lei',
},
{
CODE_N: 'lei',
ZGWD: '32℃',
TXT_N: '雷阵雨',
XZQHMC: '辛集',
TXT_D: '雷阵雨',
ZDWD: '24℃',
RQ: '2019-07-18',
CODE_D: 'lei',
},
]
data.map((item, index) => {
switch (item.TXT_D) {
case '多云转晴':
item.skyIcon = 'Showers'
break
case '晴':
item.skyIcon = 'Cloudy'
break
}
})
var weatherData = https://www.it610.com/article/data.map(function (entry) {
// 日期最高温度icon最低温度
return [entry.RQ, entry.ZGWD, weatherIcons[entry.skyIcon], entry.ZDWD]
})
},
设置
