Echarts利用多X軸實(shí)現(xiàn)七天天氣預(yù)報(bào)效果的示例代碼

更新時(shí)間：2021年10月26日 11:12:10 作者：fenccc

本文主要介紹了Echarts利用多X軸實(shí)現(xiàn)七天天氣預(yù)報(bào)效果的示例代碼，對(duì)于UI給出的設(shè)計(jì)圖，各個(gè)氣象網(wǎng)站都有類似的效果，分享給大家

UI設(shè)計(jì)圖

設(shè)計(jì)的效果

Echarts示例效果

示例效果

前言

對(duì)于UI給出的設(shè)計(jì)圖，各個(gè)氣象網(wǎng)站都有類似的效果，實(shí)現(xiàn)方式大可歸為兩種：

網(wǎng)格布局+圖表框架繪制溫度曲線；
網(wǎng)格布局+canvas自繪溫度曲線；

這兩種實(shí)現(xiàn)方式的共同點(diǎn)都是將曲線和上面的描述文字拆分開(kāi)來(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: