Echarts sample code for using multiple X-axes to achieve seven-day weather forecast
UI Design
Echarts example effect
PrefaceFor the design drawings given by UI, various meteorological websites have similar effects, and the implementation methods can be divided into two categories:
The common point of these two implementation methods is that the curve and the description text above are separated. The difficulty of this is to achieve adaptive alignment of the date icon part and the temperature curve part. Because my CSS experience is relatively weak and I use the Echarts chart framework relatively more, I decided to try using Echarts ( version: 4.6.0 ) to achieve the above effect. After checking the document, I found that Echarts supports multiple X-axes and rich text display. The display position can be controlled by adjusting the X-axis offset. At the same time, rich text supports setting background icons, which can be used to display weather icons. After some testing, I got the following sample code. Sample CodeThe following code can be imported into Echarts and run directly:
var option = {
grid: {
show: true,
backgroundColor: 'transparent',
opacity: 0.3,
borderWidth: '0',
top: '180',
bottom: '0'
},
tooltip: {
trigger: 'axis'
},
legend: {
show:false
},
xAxis: [
// date{
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: ["25th","26th","27th","28th","29th","30th","31st"]
},
// Week{
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: ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]
},
// Weather Icon {
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: 'https://d.scggqx.com/forecast/img/小雨.png'
},
height: 40,
width: 40
},
1: {
backgroundColor:
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[1]] + '.png')
image: 'https://d.scggqx.com/forecast/img/小雨.png'
},
height: 40,
width: 40
},
2: {
backgroundColor:
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[2]] + '.png')
image: 'https://d.scggqx.com/forecast/img/阴.png'
},
height: 40,
width: 40
},
3: {
backgroundColor:
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[3]] + '.png')
image: 'https://d.scggqx.com/forecast/img/小雨.png'
},
height: 40,
width: 40
},
4: {
backgroundColor:
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[4]] + '.png')
image: 'https://d.scggqx.com/forecast/img/多云.png'
},
height: 40,
width: 40
},
5: {
backgroundColor:
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[5]] + '.png')
image: 'https://d.scggqx.com/forecast/img/小雨.png'
},
height: 40,
width: 40
},
6: {
backgroundColor:
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[6]] + '.png')
image: 'https://d.scggqx.com/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: ["light rain","light rain","cloudy","light rain","cloudy","light rain","light rain"]
}
],
yAxis: {
type: 'value',
show: false,
axisLabel: {
formatter: '{value} °C',
color: 'white'
}
},
series: [
{
name: 'Maximum temperature',
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: 'Minimum temperature',
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'
}
}
]
}
The most difficult part of the above code is the setting of the weather icon. Since the value in the formatter method of axisLabel cannot be used in rich text, the subscript of the value is set to the css name in the rich text in the formatter method, and then the subscript is used to obtain the icon name to be displayed when setting the weather icon.
//axisLabel's formatter methodformatter: function(value, index) {
return '{' + index + '| }\n{b|' + value + '}'
}
// axisLabel's rich method rich: {
index: {
backgroundColor:
image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[index]] + '.png')
},
height: 40,
width: 40
}
}
Note : Final result
This concludes this article about the sample code for using Echarts to achieve a seven-day weather forecast using multiple X-axes. For more information about Echarts multi-X-axis weather forecast, please search previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Detailed explanation of the use of filter properties in CSS
>>: HTML Tutorial: title attribute and alt attribute
Recommend
Detailed explanation of overlay network in Docker
Translated from Docker official documentation, or...
Use of Docker image storage overlayfs
1. Overview The image in Docker is designed in la...
VM VirtualBox virtual machine mount shared folder
One environment Install VMware Tools on CentOS 7 ...
Detailed steps for configuring virtual hosts in nginx
Virtual hosts use special software and hardware t...
Vue implements dynamic circular percentage progress bar
Recently, when developing a small program, I enco...
MySQL query tree structure method
Table of contents MySQL query tree structure 1. A...
Summary of Mysql common benchmark commands
mysqlslap Common parameter description –auto-gene...
A detailed explanation of the overlapping and soft color matching method in web page color matching
This article does not have any quibbles, it is jus...
Parsing the commonly used v-instructions in vue.js
Table of contents Explanation of v-text on if for...
Ubuntu 20.04 firewall settings simple tutorial (novice)
Preface In today's increasingly convenient In...
How to implement nginx smooth restart
1. Background During the server development proce...
A brief discussion on the use and analysis of nofollow tags
Controversy over nofollow There was a dispute bet...
Solution to the problem that docker CMD/ENTRYPOINT executes the sh script: not found/run.sh:
There is no problem with the Dockerfile configura...
Learn the operating mechanism of jsBridge in one article
Table of contents js calling method Android 1.js ...
Example code of vue icon selector
Source: http://www.ruoyi.vip/ import Vue from ...