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
The difference between MySQL database host 127.0.0.1 and localhost
Many of my friends may encounter a problem and do...
How to increase HTML page loading speed
(1) Reduce HTTP requests. (Merge resource files a...
MySQL multi-instance configuration solution
1.1 What is MySQL multi-instance? Simply put, MyS...
Linux /etc/network/interfaces configuration interface method
The /etc/network/interfaces file in Linux is used...
Detailed explanation of the platform bus of Linux driver
Table of contents 1. Introduction to platform bus...
Why is it not recommended to use an empty string as a className in Vue?
Table of contents Compare the empty string '&...
SQL implementation of LeetCode (197. Rising temperature)
[LeetCode] 197.Rising Temperature Given a Weather...
Example code for implementing fullpage.js full-screen scrolling effect with CSS
When I was studying CSS recently, I found that I ...
How to install JDK and Mysql on Ubuntu 18.04 Linux system
Platform deployment 1. Install JDK step1. Downloa...
Use elasticsearch to delete index data regularly
1. Sometimes we use ES Due to limited resources o...
Example of using CSS3 to create Pikachu animated wallpaper
text OK, next it’s time to show the renderings. O...
How to quickly install RabbitMQ in Docker
1. Get the image #Specify the version that includ...
Detailed discussion of several methods for deduplicating JavaScript arrays
Table of contents 1. Set Deduplication 2. Double ...
Why web page encoding uses utf-8 instead of gbk or gb2312?
If you have a choice, you should use UTF-8 In fac...
HTML blockquote tag usage and beautification
Blockquote Definition and Usage The <blockquot...