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
Creating private members in JavaScript
Table of contents 1. Use closures 2. Use ES6 clas...
Detailed explanation of Linux copy and paste in VMware virtual machine
1. Linux under VMware Workstation: 1. Update sour...
Nest.js authorization verification method example
Table of contents 0x0 Introduction 0x1 RBAC Imple...
MySQL 8.0 can now handle JSON
Table of contents 1. Brief Overview 2. JSON basic...
Comprehensive understanding of html.css overflow
Comprehensive understanding of html.css overflow ...
Advertising skills in the Baidu Union environment (graphic tutorial)
Recently, students from the User Experience Team o...
Docker practice: Python application containerization
1. Introduction Containers use a sandbox mechanis...
MySQL Server 8.0.13.0 Installation Tutorial with Pictures and Text
Install 8.0.13 based on MySQL 6.1.3. MySQL 8.0.13...
After restarting the Baota panel, it prompts -ModuleNotFoundError: No module named 'geventwebsocket'
background: Because the server deployed the flask...
Notes on upgrading to mysql-connector-java8.0.27
Recently, an online security scan found a vulnera...
Analysis and solution of the problem that MySQL instance cannot be started
Table of contents Preface Scenario Analysis Summa...
JS calculates the probability of winning based on the prize weight
Table of contents 1. Example scenario 1.1. Set th...
An example of how JavaScript can prevent duplicate network requests
Preface During development, we often encounter va...
Vue implements setting multiple countdowns at the same time
This article example shares the specific code of ...
Beginner's guide to building a website ⑦: It's so easy to make a beautiful website
I once promised that I would keep writing until pe...