Echarts 利用多X轴实现未来15天天气预报_js echarts实现天气预报功能

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

UI 设计图

Echarts 实现效果

代码实现

代码分解

echarts 图表上下均显示数据

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

    grid: {
      top: '36%',
      bottom: '36%',
      left: '5%',
      right: '5%'
    },

天气图标的设置

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

    axisLabel: {
      interval: 0,
      formatter: function (value) {
        return `{icon${value}|}`
      },
      //预留rich对象
      rich: {}
    },

    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 打包之后会提示找不到图片资源，所以需要配合以下代码实现图片动态对应展示

天气图标动态导入 

const getWeatherIcon = (iconId) => {