【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 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨2 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
前端青山7 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
从兄8 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf9 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
薛一半10 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
过期的H2O211 小时前
【H2O2|全栈】JS进阶知识(四)Ajax
开发语言·javascript·ajax
MarcoPage11 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js
你好龙卷风!!!11 小时前
vue3 怎么判断数据列是否包某一列名
前端·javascript·vue.js
shenweihong13 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序