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 the relationship between Vue and VueComponent
The following case reviews the knowledge points o...
Detailed explanation of Vue's caching method example
Recently, a new requirement "front-end cache...
Will Update in a Mysql transaction lock the table?
Two cases: 1. With index 2. Without index Prerequ...
Solution to the IP address not being displayed under Linux
Table of contents Preface Solution: Step 1 Step 2...
Installation and use of mysql mycat middleware
1. What is mycat A completely open source large d...
A brief analysis of the differences between px, rem, em, vh, and vw in CSS
Absolute length px px is the pixel value, which i...
How to clear the validation prompt in element form validation
Table of contents Problem scenario: Solution: 1. ...
Implementation of CSS equal division of parent container (perfect thirds)
The width of the parent container is fixed. In or...
How to use glog log library in Linux environment
Generate Linux library The Linux version uses cen...
Use iptables and firewalld tools to manage Linux firewall connection rules
Firewall A firewall is a set of rules. When a pac...
Linux's fastest text search tool ripgrep (the best alternative to grep)
Preface Speaking of text search tools, everyone m...
HTML simple web form creation example introduction
<input> is used to collect user information ...
MySQL 5.7.30 Installation and Upgrade Issues Detailed Tutorial
wedge Because the MySQL version installed on the ...
Building a KVM virtualization platform on CentOS7 (three ways)
KVM stands for Kernel-based Virtual Machine, whic...
Solution to the problem that the text is on the lower left and cannot be resized when the textarea is laid out
Two small problems, but they bothered me for a lon...