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

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

效果

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

vue模板引擎代码

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

图表配置

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)),
  },
],
}

实际效果地址

• demo