Echarts利⽤多X轴实现七天天⽓预报效果的⽰例代码
⽬录
UI设计图
Echarts⽰例效果
前⾔
⽰例代码
最终效果
UI设计图
Echarts⽰例效果
前⾔
对于UI给出的设计图，各个⽓象⽹站都有类似的效果，实现⽅式⼤可归为两种：
1. ⽹格布局+图表框架绘制温度曲线；
2. ⽹格布局+canvas⾃绘温度曲线；
这两种实现⽅式的共同点都是将曲线和上⾯的描述⽂字拆分开来，这样做难点是要实现⽇期图标部分和⽓温曲线部分的⾃适应对齐。因为我CSS经验相对⽐较薄弱，并且使⽤Echarts图表框架相对较多，所以决定尝试使⽤Echarts（版本：4.6.0）来实现上⾯的效果。查看⽂档后发现Echarts⽀持多X轴和富⽂本显⽰，可以通过调整X轴偏移量来控制显⽰位置，同时富⽂本⽀持设置背景图标，可以⽤来显⽰天⽓图标。⼀番测试后得到下⾯的⽰例代码。
⽰例代码
下⾯这段代码可以考⼊Echarts直接运⾏：
var option = {
grid: {
show: true,
backgroundColor: 'transparent',
opacity: 0.3,
borderWidth: '0',
top: '180',
bottom: '0'
},
tooltip: {
trigger: 'axis'
},
legend: {
show: false
},
xAxis: [
// ⽇期
{
type: 'category',
boundaryGap: false,
position: 'top',
offset: 130,
zlevel: 100,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
天气预报代码大全interval: 0,
formatter: [
'{a|{value}}'
].join('\n'),
rich: {
a: {
// color: 'white',
fontSize: 18
}
}
},
nameTextStyle: {
},
data: ["25⽇","26⽇","27⽇","28⽇","29⽇","30⽇","31⽇"]
},
// 星期
{
type: 'category',
boundaryGap: false,
position: 'top',
offset: 110,
zlevel: 100,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
formatter: [
'{a|{value}}'
].join('\n'),
rich: {
a: {
// color: 'white',
fontSize: 14
}
}
},
nameTextStyle: {
fontWeight: 'bold',
fontSize: 19
},
data: ["周⼀","周⼆","周三","周四","周五","周六","周⽇"]
},
// 天⽓图标
{
type: 'category',
boundaryGap: false,
position: 'top',
offset: 20,
zlevel: 100,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
formatter: function(value, index) {
return '{' + index + '| }\n{b|' + value + '}'
},
rich: {
0: {
backgroundColor: {
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[0]] + '.png') image: 'd.scggqx/forecast/img/⼩⾬.png'
},
height: 40,
width: 40
},
1: {
backgroundColor: {
/
/ image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[1]] + '.png') image: 'd.scggqx/forecast/img/⼩⾬.png'
},
height: 40,
width: 40
},
2: {
backgroundColor: {
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[2]] + '.png') image: 'd.scggqx/forecast/img/阴.png'
},
height: 40,
width: 40
},
3: {
backgroundColor: {
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[3]] + '.png') image: 'd.scggqx/forecast/img/⼩⾬.png'
},
height: 40,
width: 40
},
4: {
backgroundColor: {
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[4]] + '.png') image: 'd.scggqx/forecast/img/多云.png'
},
height: 40,
width: 40
},
5: {
backgroundColor: {
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[5]] + '.png') image: 'd.scggqx/forecast/img/⼩⾬.png'
},
height: 40,
width: 40
},
6: {
backgroundColor: {
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[6]] + '.png') image: 'd.scggqx/forecast/img/⼩⾬.png'
},
height: 40,
width: 40
},
b: {
// color: 'white',
fontSize: 12,
lineHeight: 30,
height: 20
}
}
},
nameTextStyle: {
fontWeight: 'bold',
fontSize: 19
},
// data: this.weatherdata.weather
data: ["⼩⾬","⼩⾬","阴","⼩⾬","多云","⼩⾬","⼩⾬"]
}
],
yAxis: {
type: 'value',
show: false,
axisLabel: {
formatter: '{value} °C',
color: 'white'
}
},
series: [
{
name: '最⾼⽓温',
type: 'line',
data: ["16.3","16.2","17.6","14.2","17.6","15.7","14.3"],
symbol: 'emptyCircle',
symbolSize: 10,
showSymbol: true,
smooth: true,
itemStyle: {
normal: {
color: '#C95843'
}
},
label: {
show: true,
position: 'top',
// color: 'white',
formatter: '{c} °C'
},
lineStyle: {
width: 1,
/
/ color: 'white'
},
areaStyle: {
opacity: 1,
color: 'transparent'
}
},
{
name: '最低⽓温',
type: 'line',
data: ["13.4","12.8","13.5","12.5","12.4","13.2","13"],
symbol: 'emptyCircle',
symbolSize: 10,
showSymbol: true,
smooth: true,
itemStyle: {
normal: {
color: 'blue'
}
},
label: {
show: true,
position: 'bottom',
// color: 'white',
formatter: '{c} °C'
},
lineStyle: {
width: 1,
// color: 'white'
},
areaStyle: {
opacity: 1,
color: 'transparent'
}
}
]
}
上⾯的代码，最难的部分就是天⽓图标的设置，由于axisLabel的formatter⽅法中的value值没法在富⽂本中使⽤，所以这⾥在formatter⽅法中将value的下标设置成了富⽂本中的css名，然后在设置天⽓图标时使⽤下标获取需要显⽰的图标名称。
// axisLabel的formatter⽅法
formatter: function(value, index) {
return '{' + index + '| }\n{b|' + value + '}'
}
// axisLabel的rich⽅法
rich: {
index: {
backgroundColor: {
image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[index]] + '.png')
},
height: 40,
width: 40
}
}
注：
1、this.weatherIconDic是我本地定义的⼀个天⽓图标的数据字典。（如：{ ‘晴': ‘a00', ‘多云': ‘a01', ‘阴': ‘a02', ‘阵⾬': ‘a03', ‘雷阵⾬': ‘a04', ‘冰雹': ‘a05', ‘⾬夹雪': ‘a06', ‘⼩⾬': ‘a07', ‘中⾬': ‘a08', ‘⼤⾬': ‘a09', ‘暴⾬': ‘a10', ‘⼤暴⾬': ‘a11', ‘特⼤暴⾬': ‘a12', ‘阵雪': ‘a13', ‘⼩雪': ‘a14', ‘中雪': ‘a15', ‘⼤雪': ‘a16', ‘暴雪':‘a17', ‘雾': ‘a18', ‘冻⾬': ‘a19', ‘沙尘暴': ‘a20', ‘⼩到中⾬': ‘a21', ‘中⾬-⼤⾬': ‘a22', ‘⼤⾬-暴⾬': ‘a23', ‘暴⾬-⼤暴⾬': ‘a24', ‘⼤暴⾬-特⼤暴⾬': ‘a25', ‘⼩雪-中雪':‘a26', ‘中雪-⼤雪': ‘a27', ‘⼤雪-暴雪': ‘a28', ‘浮尘': ‘a29', ‘扬沙': ‘a30', ‘强沙尘暴': ‘a31' }）
2、this.weatherdata.weather是后端传回来的天⽓类型。（如：[“⼩⾬”,“⼩⾬”,“阴”,“⼩⾬”,“多云”,“⼩⾬”,“⼩⾬”]）
最终效果
到此这篇关于Echarts利⽤多X轴实现七天天⽓预报效果的⽰例代码的⽂章就介绍到这了，更多相关Echarts 多X轴天⽓预报内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论