Echarts利用多X軸實(shí)現(xiàn)七天天氣預(yù)報(bào)效果的示例代碼
UI設(shè)計(jì)圖
Echarts示例效果
前言
對(duì)于UI給出的設(shè)計(jì)圖，各個(gè)氣象網(wǎng)站都有類似的效果，實(shí)現(xiàn)方式大可歸為兩種：
- 網(wǎng)格布局+圖表框架繪制溫度曲線；
- 網(wǎng)格布局+canvas自繪溫度曲線；
這兩種實(shí)現(xiàn)方式的共同點(diǎn)都是將曲線和上面的描述文字拆分開來(lái)，這樣做難點(diǎn)是要實(shí)現(xiàn)日期圖標(biāo)部分和氣溫曲線部分的自適應(yīng)對(duì)齊。因?yàn)槲褻SS經(jīng)驗(yàn)相對(duì)比較薄弱，并且使用Echarts圖表框架相對(duì)較多，所以決定嘗試使用Echarts（版本：4.6.0）來(lái)實(shí)現(xiàn)上面的效果。查看文檔后發(fā)現(xiàn)Echarts支持多X軸和富文本顯示，可以通過(guò)調(diào)整X軸偏移量來(lái)控制顯示位置，同時(shí)富文本支持設(shè)置背景圖標(biāo)，可以用來(lái)顯示天氣圖標(biāo)。一番測(cè)試后得到下面的示例代碼。
示例代碼
下面這段代碼可以考入Echarts直接運(yùn)行：
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: ["周一","周二","周三","周四","周五","周六","周日"]
},
// 天氣圖標(biāo)
{
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: ["小雨","小雨","陰","小雨","多云","小雨","小雨"]
}
],
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'
}
}
]
}
上面的代碼，最難的部分就是天氣圖標(biāo)的設(shè)置，由于axisLabel的formatter方法中的value值沒(méi)法在富文本中使用，所以這里在formatter方法中將value的下標(biāo)設(shè)置成了富文本中的css名，然后在設(shè)置天氣圖標(biāo)時(shí)使用下標(biāo)獲取需要顯示的圖標(biāo)名稱。
// 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是我本地定義的一個(gè)天氣圖標(biāo)的數(shù)據(jù)字典。（如：{ ‘晴': ‘a(chǎn)00', ‘多云': ‘a(chǎn)01', ‘陰': ‘a(chǎn)02', ‘陣雨': ‘a(chǎn)03', ‘雷陣雨': ‘a(chǎn)04', ‘冰雹': ‘a(chǎn)05', ‘雨夾雪': ‘a(chǎn)06', ‘小雨': ‘a(chǎn)07', ‘中雨': ‘a(chǎn)08', ‘大雨': ‘a(chǎn)09', ‘暴雨': ‘a(chǎn)10', ‘大暴雨': ‘a(chǎn)11', ‘特大暴雨': ‘a(chǎn)12', ‘陣雪': ‘a(chǎn)13', ‘小雪': ‘a(chǎn)14', ‘中雪': ‘a(chǎn)15', ‘大雪': ‘a(chǎn)16', ‘暴雪': ‘a(chǎn)17', ‘霧': ‘a(chǎn)18', ‘凍雨': ‘a(chǎn)19', ‘沙塵暴': ‘a(chǎn)20', ‘小到中雨': ‘a(chǎn)21', ‘中雨-大雨': ‘a(chǎn)22', ‘大雨-暴雨': ‘a(chǎn)23', ‘暴雨-大暴雨': ‘a(chǎn)24', ‘大暴雨-特大暴雨': ‘a(chǎn)25', ‘小雪-中雪': ‘a(chǎn)26', ‘中雪-大雪': ‘a(chǎn)27', ‘大雪-暴雪': ‘a(chǎn)28', ‘浮塵': ‘a(chǎn)29', ‘揚(yáng)沙': ‘a(chǎn)30', ‘強(qiáng)沙塵暴': ‘a(chǎn)31' }）
2、this.weatherdata.weather是后端傳回來(lái)的天氣類型。（如：[“小雨”,“小雨”,“陰”,“小雨”,“多云”,“小雨”,“小雨”]）
最終效果
到此這篇關(guān)于Echarts利用多X軸實(shí)現(xiàn)七天天氣預(yù)報(bào)效果的示例代碼的文章就介紹到這了,更多相關(guān)Echarts 多X軸天氣預(yù)報(bào)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
FullCalendar日歷插件應(yīng)用之?dāng)?shù)據(jù)展現(xiàn)(一)
fullcalendar作為一個(gè)功能完善的日歷插件使用非常廣泛，在web開發(fā)開發(fā)過(guò)程 中非常流行。它與ext js 中的calendar非常類似，但考慮到extjs 比較“復(fù)雜龐大”，所以我在開發(fā)開發(fā)過(guò)程中都會(huì)優(yōu)先考慮fullcalendar2015-12-12
近期在做微信小程序時(shí)，涉及到了小程序的支付和退款流程，所以也大概的將這方面的東西看了一個(gè)遍，就在這篇文章里總結(jié)一下2017-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)漂亮的彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
前端學(xué)習(xí)筆記style，currentStyle，getComputedStyle的用法與區(qū)別
這篇文章主要介紹了前端學(xué)習(xí)筆記style，currentStyle，getComputedStyle的用法與區(qū)別,需要的朋友可以參考下2016-05-05
先不講文章的主題是什么，大家先來(lái)做做這些題目，看你能做對(duì)多少。這也是反映了你對(duì)JS基礎(chǔ)知識(shí)的掌握程度！2009-12-12
這篇文章主要介紹了ES6教程之for循環(huán)和Map,Set用法,結(jié)合實(shí)例形式分析了ECMAScript6中for循環(huán)和Map,Set基本概念、功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-04-04
javascript實(shí)現(xiàn)簡(jiǎn)單的貪吃蛇游戲
本文很簡(jiǎn)單，給大家分享了一段使用javascript實(shí)現(xiàn)簡(jiǎn)單的貪吃蛇游戲的代碼，算是對(duì)自己學(xué)習(xí)javascript的一次小小的總結(jié)，代碼參考了網(wǎng)友的部分內(nèi)容，推薦給大家，希望對(duì)大家能夠有所幫助。2015-03-03
這篇文章主要介紹了前端實(shí)現(xiàn)添加水印功能的四種方法,分別是使用CSS、Canvas、SVG以及動(dòng)態(tài)生成水印圖像,每種方法都有其特點(diǎn)和適用場(chǎng)景,并且每種方法都給出了實(shí)例代碼,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了js如何實(shí)現(xiàn)瀏覽器打印功能，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)篩選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11