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