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

最新推荐文章于 2024-10-10 14:36:05 发布

_格鲁特宝宝

最新推荐文章于 2024-10-10 14:36:05 发布

阅读量1k

点赞数 8

分类专栏： Web FrontEnd ECharts javascript 文章标签： echarts 前端 javascript 七天天气图表实现十五天天气图表实现

_格鲁特宝宝原创，转载请务必注明出处

本文链接：https://blog.csdn.net/grootbaby/article/details/136941904

版权

本文介绍了如何利用Echarts的多X轴特性来创建一个显示未来15天天气预报的图表。详细讲解了UI设计、Echarts实现效果，并通过代码分解展示了如何设置图表上下显示天气数据、设定天气图标以及动态导入图标，同时解决了Vite打包后图片资源问题。

摘要由CSDN通过智能技术生成

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
      }
    }