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

实际效果地址

相关推荐
I_Am_Me_23 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
℘团子এ34 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z39 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
前端百草阁1 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
zwjapple1 小时前
typescript里面正则的使用
开发语言·javascript·正则表达式
小五Five1 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript
临枫5411 小时前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
酷酷的威朗普1 小时前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5