Echarts 利用多X轴实现未来15天天气预报

Echarts 利用多X轴实现未来15天天气预报

UI 设计图

Echarts 实现效果

代码实现

代码分解

echarts 图表上下均显示数据

通过设置 grid.top 和 grid.bottom 设置白天和夜间天气展示区域

javascript 复制代码
    grid: {
      top: '36%',
      bottom: '36%',
      left: '5%',
      right: '5%'
    },
天气图标的设置

由于 axisLabel 的 formatter 方法中的 value 值没法在富文本中使用,所以这里在formatter方法中将 value 的下标设置成了富文本中的 css 名,然后在设置天气图标时使用下标获取需要显示的图标名称。

javascript 复制代码
    axisLabel: {
      interval: 0,
      formatter: function (value) {
        return `{icon${value}|}`
      },
      //预留rich对象
      rich: {}
    },
javascript 复制代码
    for (let i = 0; i < globalData.option.xAxis[xIndex].data.length; i++) {
      const element = globalData.option.xAxis[xIndex].data[i];
      globalData.option.xAxis[xIndex].axisLabel.rich[`icon${element}`] = {
        backgroundColor: {
          // image: `/assets/images/weather/W${element}.png`
          image: getWeatherIcon(element)
        },
        width: 30,
        align: 'center',
        height: 30
      }
    }

注: image: `/assets/images/weather/W${element}.png`

此链接也可以实现图片展示,但是Vite 打包之后会提示找不到图片资源,所以需要配合以下代码实现图片动态对应展示

天气图标动态导入
javascript 复制代码
const getWeatherIcon = (iconId) => {
  return new URL(`/assets/images/weather/W${iconId}@3x.png`, import.meta.url).href;
}
图表数据置空
javascript 复制代码
      for (let i = 0; i < globalData.option.xAxis.length; i++) {
        globalData.option.xAxis[i].data.length = 0
      }
      for (let i = 0; i < globalData.option.series.length; i++) {
        globalData.option.series[i].data.length = 0
      }

全量代码

以下代码可以贴入 Echarts 直接运行:

javascript 复制代码
  option: {
    grid: {
      show: true,
      backgroundColor: 'transparent',
      opacity: 0.3,
      borderWidth: '0',
      top: '36%',
      bottom: '36%',
      left: '5%',
      right: '5%'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      show: false
    },
    xAxis: [
      // 星期
      {
        name: '星期',
        nameTextStyle: {
          fontSize: 0,
        },
        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
            }
          }
        },
        data: new Array(15).fill(null)
      },
      // 日期
      {
        name: '日期',
        nameTextStyle: {
          fontSize: 0,
        },
        type: 'category',
        boundaryGap: false,
        position: 'top',
        offset: 80,
        zlevel: 100,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          formatter: [
            '{a|{value}}'
          ].join('\n'),
          rich: {
            a: {
              color: '#aaa',
              fontSize: 12
            }
          }
        },
        data: new Array(15).fill(null)
      },
      // 白天天气
      {
        name: '白天天气',
        nameTextStyle: {
          fontSize: 0,
        },
        type: 'category',
        boundaryGap: false,
        position: 'top',
        offset: 50,
        zlevel: 100,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          formatter: [
            '{a|{value}}'
          ].join('\n'),
          rich: {
            a: {
              // color: 'white',
              fontSize: 14
            }
          }
        },
        data: new Array(15).fill(null)
      },
      // 白天图标
      {
        name: '白天图标',
        nameTextStyle: {
          fontSize: 0,
        },
        type: 'category',
        boundaryGap: false,
        position: 'top',
        offset: 10,
        zlevel: 100,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          formatter: function (value) {
            return `{icon${value}|}`
          },
          //预留rich对象
          rich: {}
        },
        // data: this.weatherdata.weather
        data: new Array(15).fill(null)
      },
      // 夜间图标
      {
        name: '夜间图标',
        nameTextStyle: {
          fontSize: 0,
        },
        type: 'category',
        boundaryGap: false,
        position: 'bottom',
        offset: 10,
        zlevel: 100,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          formatter: function (value) {
            return `{icon${value}|}`
          },
          //预留rich对象
          rich: {}
        },
        // data: this.weatherdata.weather
        data: new Array(15).fill(null)
      },
      // 夜间天气
      {
        name: '夜间天气',
        nameTextStyle: {
          fontSize: 0,
        },
        type: 'category',
        boundaryGap: false,
        position: 'bottom',
        offset: 50,
        zlevel: 100,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          formatter: [
            '{a|{value}}'
          ].join('\n'),
          rich: {
            a: {
              // color: 'white',
              fontSize: 14
            }
          }
        },
        data: new Array(15).fill(null)
      },
      // 风向
      {
        name: '风向',
        nameTextStyle: {
          fontSize: 0,
        },
        type: 'category',
        boundaryGap: false,
        position: 'bottom',
        offset: 80,
        zlevel: 100,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          formatter: [
            '{a|{value}}'
          ].join('\n'),
          rich: {
            a: {
              // color: 'white',
              fontSize: 12
            }
          }
        },
        data: new Array(15).fill(null)
      },
      // 风级
      {
        name: '风级',
        nameTextStyle: {
          fontSize: 0,
        },
        type: 'category',
        boundaryGap: false,
        position: 'bottom',
        offset: 105,
        zlevel: 100,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          formatter: [
            '{a|{value}级}'
          ].join('\n'),
          rich: {
            a: {
              color: '#aaa',
              fontSize: 12
            }
          }
        },
        data: new Array(15).fill(null)
      },
    ],
    yAxis: {
      type: 'value',
      show: false,
      axisLabel: {
        formatter: '{value} °C',
        color: 'white'
      }
    },
    series: [
      {
        name: '最高气温',
        type: 'line',
        data: new Array(15).fill(0),
        symbol: 'emptyCircle',
        symbolSize: 6,
        showSymbol: true,
        smooth: true,
        itemStyle: {
          color: 'orange'
        },
        label: {
          show: true,
          position: 'top',
          color: 'orange',
          formatter: '{c}'
        },
        lineStyle: {
          width: 1,
        },
        areaStyle: {
          opacity: 1,
          color: 'transparent'
        }
      },
      {
        name: '最低气温',
        type: 'line',
        data: new Array(15).fill(0),
        symbol: 'emptyCircle',
        symbolSize: 6,
        showSymbol: true,
        smooth: true,
        itemStyle: {
          color: 'dodgerblue'
        },
        label: {
          show: true,
          position: 'bottom',
          color: 'dodgerblue',
          formatter: '{c}'
        },
        lineStyle: {
          width: 1,
        },
        areaStyle: {
          opacity: 1,
          color: 'transparent'
        }
      },
    ]
  },
相关推荐
非凡ghost8 小时前
AOMEI Partition Assistant磁盘分区工具:磁盘管理的得力助手
linux·运维·前端·数据库·学习·生活·软件需求
UrbanJazzerati8 小时前
前端入门:margin居中、border、box-radius、transform、box-shadow、mouse事件、preventDefault()
前端·面试
蝎子莱莱爱打怪8 小时前
🚀🚀🚀嗨,一起来开发 开源IM系统呀!
前端·后端·github
Enddme9 小时前
《前端笔试必备:JavaScript ACM输入输出模板》
前端·javascript·面试
前端鱼9 小时前
前端面试中值得关注的js题
前端·面试
UnnamedOrange9 小时前
有来前后端部署
前端·后端
力Mer9 小时前
全排列-遇到的深浅拷贝问题
javascript
德育处主任9 小时前
p5.js 绘制 3D 椭球体 ellipsoid
前端·javascript·数据可视化
未来之窗软件服务9 小时前
未来之窗昭和仙君 (四) 前端网页分页 — 东方仙盟筑基期
前端·仙盟创梦ide·东方仙盟·东方仙盟修仙·昭和仙君
安卓开发者9 小时前
鸿蒙Next Web组件详解:属性设置与事件处理实战
前端·华为·harmonyos