【Echarts】使用多横坐标轴展示近十五天天气预报

现在手机都有天气app,使用echarts展示十五天天气预报的需要你遇到过这样离大谱的需求吗?如果没有或许你能从中找到些许思路。

效果

看效果是不是有点那么个意思,开局一张图,代码全靠ctrl + c。不多说上代码。

vue模板引擎代码

html 复制代码
<template>
  <div ref="xAxisChartRef" class="chart"></div>
</template>
<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { useECharts } from '@/utils';
  import { options } from './options';

  let chart: EChartsType;
  const xAxisChartRef = ref();

  onMounted(() => {
    chart = useECharts(xAxisChartRef.value, options);
  });
</script>

<style lang="less" scoped>
  .chart {
    height: 300px;
    background: linear-gradient(90deg, #dde4ff, #fff, #fff, #dde4ff);
  }
</style>

图表配置

ts 复制代码
import mock from 'mockjs';
import clear from './assets/clear.png';
import cloudy from './assets/cloudy.png';
import rainy from './assets/rainy.png';
import thundershower from './assets/thundershower.png';
import type { EChartsType } from 'echarts';
const weather = [clear, cloudy, rainy, thundershower];
export const optons = {
tooltip: {
  trigger: 'none',
  axisPointer: {
    type: 'cross',
  },
},
grid: {
  top: 80,
  left: 30,
  bottom: 50,
  right: 30,
},
xAxis: [
  {
    type: 'category',
    boundaryGap: false,
    position: 'top',
    offset: 50,
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      interval: 0,
      formatter: ['{a|{value}}'].join('\n'),
      rich: {
        a: {
          fontSize: 13,
        },
      },
    },
    nameTextStyle: {},
    data: Array.from({ length: 15 }, (_, i) => {
      const day = new Date().getDate();
      const date = new Date(new Date().setDate(day + i));
      return `${date.getMonth() + 1}/${date.getDate()}`;
    }),
  },
  {
    type: 'category',
    boundaryGap: false,
    position: 'top',
    offset: 32,
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      interval: 0,
      formatter: ['{a|{value}}'].join('\n'),
      rich: {
        a: {
          // color: 'white',
          fontSize: 12,
        },
      },
    },
    nameTextStyle: {
      fontWeight: 'bold',
      fontSize: 19,
    },
    data: Array.from({ length: 15 }, (_, i) => {
      const day = new Date().getDate();
      const date = new Date(new Date().setDate(day + i));
      const week = ['日', '一', '二', '三', '四', '五', '六'];
      return `周${week[date.getDay()]}`;
    }),
  },
  {
    type: 'category',
    boundaryGap: false,
    position: 'top',
    offset: 32,
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      interval: 0,
      formatter: ['{a|{value}}'].join('\n'),
      rich: {
        a: {
          // color: 'white',
          fontSize: 12,
        },
      },
    },
    nameTextStyle: {
      fontWeight: 'bold',
      fontSize: 19,
    },
    data: Array.from({ length: 15 }, (_, i) => {
      const day = new Date().getDate();
      const date = new Date(new Date().setDate(day + i));
      const week = ['日', '一', '二', '三', '四', '五', '六'];
      return `周${week[date.getDay()]}`;
    }),
  },
  {
    type: 'category',
    boundaryGap: false,
    position: 'top',
    offset: -24,
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      interval: 0,
      formatter: function (value, index) {
        return '{' + index + '| }\n{b|' + value + '}';
      },
      rich: {
        ...Array.from({ length: 15 }, () => ({
          backgroundColor: {
            image: weather[mock.Random.integer(0, 3)],
          },
          height: 16,
        })),
        b: {
          fontSize: 11,
          lineHeight: 30,
          height: 20,
        },
      },
    },
    nameTextStyle: {
      fontWeight: 'bold',
      fontSize: 19,
    },
    data: Array.from(
      { length: 15 },
      () =>
        ['小雨', '阴', '多云', '小雨', '晴', '雨夹雪'][
          mock.Random.integer(0, 5)
        ]
    ),
  },
  {
    type: 'category',
    boundaryGap: false,
    position: 'bottom',
    offset: -5,
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      interval: 0,
      formatter: function (value, index) {
        return '{' + index + '| }\n{b|' + value + '}';
      },
      rich: {
        ...Array.from({ length: 15 }, () => ({
          backgroundColor: {
            image: weather[mock.Random.integer(0, 3)],
          },
          height: 16,
        })),
        b: {
          fontSize: 11,
          lineHeight: 30,
          height: 20,
        },
      },
    },
    nameTextStyle: {
      fontWeight: 'bold',
      fontSize: 19,
    },
    data: Array.from(
      { length: 15 },
      () =>
        ['小雨', '阴', '多云', '小雨', '晴', '雨夹雪'][
          mock.Random.integer(0, 5)
        ]
    ),
  },
],
yAxis: [
  {
    type: 'value',
    boundaryGap: true,
    show: false,
    scale: true,
  },
],
series: [
  {
    name: '最高气温',
    type: 'line',
    emphasis: {
      focus: 'series',
    },
    lineStyle: {
      color: '#FF8A15',
    },
    itemStyle: {
      color: '#FF8A15',
    },
    data: Array.from(
      { length: 24 },
      () => `${mock.Random.integer(18, 29)}`
    ),
  },
  {
    name: '最低气温',
    type: 'line',
    emphasis: {
      focus: 'series',
    },
    lineStyle: {
      color: '#0091FF',
    },
    itemStyle: {
      color: '#0091FF',
    },
    data: Array.from({ length: 24 }, () => mock.Random.float(9, 17)),
  },
],
}

实际效果地址

相关推荐
某公司摸鱼前端1 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~1 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
wen's3 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
vvilkim4 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim4 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心4 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络4 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
失落的多巴胺6 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear6 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息6 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js