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

实际效果地址

相关推荐
10年前端老司机1 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
晓13137 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
烛阴7 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7898 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼9 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
阳火锅10 小时前
Vue 开发者的外挂工具:配置一个 JSON,自动造出一整套页面!
javascript·vue.js·面试
每天吃饭的羊10 小时前
react中为啥使用剪头函数
前端·javascript·react.js
多啦C梦a10 小时前
【适合小白篇】什么是 SPA?前端路由到底在路由个啥?我来给你聊透!
前端·javascript·架构
薛定谔的算法10 小时前
《长安的荔枝·事件流版》——一颗荔枝引发的“冒泡惨案”
前端·javascript·编程语言
轻语呢喃10 小时前
每日LeetCode : 两数相加--链表操作与进位的经典处理
javascript·算法