Echarts利用多X軸實現七天天氣預報效果

• • UI設計圖
  • Echarts示例效果
  • 前言
  • 示例代碼
  • 最終效果

UI設計圖

Echarts示例效果

前言

對于UI給出的設計圖，各個氣象網站都有類似的效果，實現方式大可歸為兩種：

網格布局+圖表框架繪制溫度曲線；

網格布局+canvas自繪溫度曲線；

這兩種實現方式的共同點都是將曲線和上面的描述文字拆分開來，這樣做難點是要實現日期圖標部分和氣溫曲線部分的自適應對齊。因為我CSS經驗相對比較薄弱，并且使用Echarts圖表框架相對較多，所以決定嘗試使用Echarts（版本：4.6.0）來實現上面的效果。查看文檔后發現Echarts支持多X軸和富文本顯示，可以通過調整X軸偏移量來控制顯示位置，同時富文本支持設置背景圖標，可以用來顯示天氣圖標。一番測試后得到下面的示例代碼。

示例代碼

下面這段代碼可以考入Echarts直接運行：

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: ["周一","周二","周三","周四","周五","周六","周日"]},// 天氣圖標{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.weatherdata: ["小雨","小雨","陰","小雨","多云","小雨","小雨"]}],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'}}]}

上面的代碼，最難的部分就是天氣圖標的設置，由于axisLabel的formatter方法中的value值沒法在富文本中使用，所以這里在formatter方法中將value的下標設置成了富文本中的css名，然后在設置天氣圖標時使用下標獲取需要顯示的圖標名稱。

// 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是我本地定義的一個天氣圖標的數據字典。（如：{ ‘晴’: ‘a00’, ‘多云’: ‘a01’, ‘陰’: ‘a02’, ‘陣雨’: ‘a03’, ‘雷陣雨’: ‘a04’, ‘冰雹’: ‘a05’, ‘雨夾雪’: ‘a06’, ‘小雨’: ‘a07’, ‘中雨’: ‘a08’, ‘大雨’: ‘a09’, ‘暴雨’: ‘a10’, ‘大暴雨’: ‘a11’, ‘特大暴雨’: ‘a12’, ‘陣雪’: ‘a13’, ‘小雪’: ‘a14’, ‘中雪’: ‘a15’, ‘大雪’: ‘a16’, ‘暴雪’: ‘a17’, ‘霧’: ‘a18’, ‘凍雨’: ‘a19’, ‘沙塵暴’: ‘a20’, ‘小到中雨’: ‘a21’, ‘中雨-大雨’: ‘a22’, ‘大雨-暴雨’: ‘a23’, ‘暴雨-大暴雨’: ‘a24’, ‘大暴雨-特大暴雨’: ‘a25’, ‘小雪-中雪’: ‘a26’, ‘中雪-大雪’: ‘a27’, ‘大雪-暴雪’: ‘a28’, ‘浮塵’: ‘a29’, ‘揚沙’: ‘a30’, ‘強沙塵暴’: ‘a31’ }）
2、this.weatherdata.weather是后端傳回來的天氣類型。（如：[“小雨”,“小雨”,“陰”,“小雨”,“多云”,“小雨”,“小雨”]）

最終效果

總結

以上是生活随笔為你收集整理的Echarts利用多X轴实现七天天气预报效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。