Echarts 利用多X轴实现未来15天天气预报
Echarts 利用多X轴实现未来15天天气预报
UI 设计图

Echarts 实现效果
代码实现
代码分解
echarts 图表上下均显示数据
通过设置 grid.top 和 grid.bottom 设置白天和夜间天气展示区域
grid: {top: '36%',bottom: '36%',left: '5%',right: '5%'},
天气图标的设置
由于 axisLabel 的 formatter 方法中的 value 值没法在富文本中使用,所以这里在formatter方法中将 value 的下标设置成了富文本中的 css 名,然后在设置天气图标时使用下标获取需要显示的图标名称。
axisLabel: {interval: 0,formatter: function (value) {return `{icon${value}|}`},//预留rich对象rich: {}},
for (let i = 0; i < globalData.option.xAxis[xIndex].data.length; i++) {const element = globalData.option.xAxis[xIndex].data[i];globalData.option.xAxis[xIndex].axisLabel.rich[`icon${element}`] = {backgroundColor: {// image: `/assets/images/weather/W${element}.png`image: getWeatherIcon(element)},width: 30,align: 'center',height: 30}}
注: image: `/assets/images/weather/W${element}.png`
此链接也可以实现图片展示,但是Vite 打包之后会提示找不到图片资源,所以需要配合以下代码实现图片动态对应展示
天气图标动态导入
const getWeatherIcon = (iconId) => {return new URL(`/assets/images/weather/W${iconId}@3x.png`, import.meta.url).href;
}
图表数据置空
for (let i = 0; i < globalData.option.xAxis.length; i++) {globalData.option.xAxis[i].data.length = 0}for (let i = 0; i < globalData.option.series.length; i++) {globalData.option.series[i].data.length = 0}
全量代码
以下代码可以贴入 Echarts 直接运行:
option: {grid: {show: true,backgroundColor: 'transparent',opacity: 0.3,borderWidth: '0',top: '36%',bottom: '36%',left: '5%',right: '5%'},tooltip: {trigger: 'axis'},legend: {show: false},xAxis: [// 星期{name: '星期',nameTextStyle: {fontSize: 0,},type: 'category',boundaryGap: false,position: 'top',offset: 110,zlevel: 100,axisLine: {show: false},axisTick: {show: false},axisLabel: {interval: 0,formatter: ['{a|{value}}'].join('\n'),rich: {a: {// color: 'white',fontSize: 14}}},data: new Array(15).fill(null)},// 日期{name: '日期',nameTextStyle: {fontSize: 0,},type: 'category',boundaryGap: false,position: 'top',offset: 80,zlevel: 100,axisLine: {show: false},axisTick: {show: false},axisLabel: {interval: 0,formatter: ['{a|{value}}'].join('\n'),rich: {a: {color: '#aaa',fontSize: 12}}},data: new Array(15).fill(null)},// 白天天气{name: '白天天气',nameTextStyle: {fontSize: 0,},type: 'category',boundaryGap: false,position: 'top',offset: 50,zlevel: 100,axisLine: {show: false},axisTick: {show: false},axisLabel: {interval: 0,formatter: ['{a|{value}}'].join('\n'),rich: {a: {// color: 'white',fontSize: 14}}},data: new Array(15).fill(null)},// 白天图标{name: '白天图标',nameTextStyle: {fontSize: 0,},type: 'category',boundaryGap: false,position: 'top',offset: 10,zlevel: 100,axisLine: {show: false},axisTick: {show: false},axisLabel: {interval: 0,formatter: function (value) {return `{icon${value}|}`},//预留rich对象rich: {}},// data: this.weatherdata.weatherdata: new Array(15).fill(null)},// 夜间图标{name: '夜间图标',nameTextStyle: {fontSize: 0,},type: 'category',boundaryGap: false,position: 'bottom',offset: 10,zlevel: 100,axisLine: {show: false},axisTick: {show: false},axisLabel: {interval: 0,formatter: function (value) {return `{icon${value}|}`},//预留rich对象rich: {}},// data: this.weatherdata.weatherdata: new Array(15).fill(null)},// 夜间天气{name: '夜间天气',nameTextStyle: {fontSize: 0,},type: 'category',boundaryGap: false,position: 'bottom',offset: 50,zlevel: 100,axisLine: {show: false},axisTick: {show: false},axisLabel: {interval: 0,formatter: ['{a|{value}}'].join('\n'),rich: {a: {// color: 'white',fontSize: 14}}},data: new Array(15).fill(null)},// 风向{name: '风向',nameTextStyle: {fontSize: 0,},type: 'category',boundaryGap: false,position: 'bottom',offset: 80,zlevel: 100,axisLine: {show: false},axisTick: {show: false},axisLabel: {interval: 0,formatter: ['{a|{value}}'].join('\n'),rich: {a: {// color: 'white',fontSize: 12}}},data: new Array(15).fill(null)},// 风级{name: '风级',nameTextStyle: {fontSize: 0,},type: 'category',boundaryGap: false,position: 'bottom',offset: 105,zlevel: 100,axisLine: {show: false},axisTick: {show: false},axisLabel: {interval: 0,formatter: ['{a|{value}级}'].join('\n'),rich: {a: {color: '#aaa',fontSize: 12}}},data: new Array(15).fill(null)},],yAxis: {type: 'value',show: false,axisLabel: {formatter: '{value} °C',color: 'white'}},series: [{name: '最高气温',type: 'line',data: new Array(15).fill(0),symbol: 'emptyCircle',symbolSize: 6,showSymbol: true,smooth: true,itemStyle: {color: 'orange'},label: {show: true,position: 'top',color: 'orange',formatter: '{c}'},lineStyle: {width: 1,},areaStyle: {opacity: 1,color: 'transparent'}},{name: '最低气温',type: 'line',data: new Array(15).fill(0),symbol: 'emptyCircle',symbolSize: 6,showSymbol: true,smooth: true,itemStyle: {color: 'dodgerblue'},label: {show: true,position: 'bottom',color: 'dodgerblue',formatter: '{c}'},lineStyle: {width: 1,},areaStyle: {opacity: 1,color: 'transparent'}},]},
相关文章:
Echarts 利用多X轴实现未来15天天气预报
Echarts 利用多X轴实现未来15天天气预报 UI 设计图 Echarts 实现效果 代码实现 代码分解 echarts 图表上下均显示数据 通过设置 grid.top 和 grid.bottom 设置白天和夜间天气展示区域 grid: {top: 36%,bottom: 36%,left: 5%,right: 5%}, 天气图标的设置 由于 axisLabel 的…...
[数据结构初阶]二叉树
各位读者老爷好,鼠鼠我现在浅浅介绍一些关于二叉树的知识点,在各位老爷茶余饭后的闲暇时光不妨看看,鼠鼠很希望得到各位老爷的指正捏! 开始介绍之前,给各位老爷看一张风景照,有读者老爷知道在哪里吗&#x…...
matlab和stm32的安装环境。能要求与时俱进吗,en.stm32cubeprg-win64_v2-6-0.zip下载太慢了
STM32CubeMX 6.4.0 Download STM32CubeProgrammer 2.6.0 Download 版本都更新到6.10了,matlab还需要6.4,除了st.com其他地方都没有下载的,com.cn也没有。曹 还需要那么多固件安装。matlab要求制定固件位置,然后从cubemx中也指定…...
Opencv面试题
1、OpenCV中cv::Mat的深拷贝和浅拷贝问题? 深拷贝:分配新内存的同时拷贝数据,当被赋值的容器被修改时,原始容器数据不会改变。浅拷贝:仅拷贝数据,当被赋值容器修改时,原始容器数据也会做同样改变。 深拷贝…...
Python连接MariaDB数据库
2024软件测试面试刷题,这个小程序(永久刷题),靠它快速找到工作了!(刷题APP的天花板)【持续更新最新版】-CSDN博客 Python连接MariaDB数据库 一、安装mariadb库 pip install mariadb 二、连接…...
基于python+vue的ITS 信息平台的设计与实现flask-django-nodejs-php
伴随着我国社会的发展,人民生活质量日益提高。于是对系统进行规范而严格是十分有必要的,所以许许多多的信息管理系统应运而生。此时单靠人力应对这些事务就显得有些力不从心了。所以本论文将设计一套信息平台,帮助交通局进行信息共享、交通信…...
MediatR 框架使用FluentValidation对Comand/Query进行自动拦截验证
简介 目录 简介 1. MediatR项目框架 2. 实现步骤 步骤 1:编写管道行为 1. query 查询的管道 2. command命令的管道 步骤 2:注册验证器和管道行为 步骤 3:定义命令类 步骤 4:定义处理程序 步骤 5:编写命令验证器…...
TS + Vue3 elementUI 表格列表中如何方便的标识不同类型的内容,颜色区分 enum
TS Vue3 elementUI 表格列表中如何方便的标识不同类型的内容,颜色区分 enum 本文内容为 TypeScript 一、基础知识 在展示列表的时候,列表中的某个数据可能是一个类别,比如: enum EnumOrderStatus{"未受理" 1,"…...
从零开始一步一步掌握大语言模型---(2-什么是Token?)
了解自然语言处理或者听说过大语言模型的同学都听过,token。一般来说,它代表的是语言中不可再分的最小单元。我们人类的语言不仅有文字,还有语音。针对文字、语音来说,它们都各自有不同的划分token的方法。本节将尽可能详细的介绍…...
使用专属浏览器在国内直连GPT教程
Wildcard官方推特发文说他们最近推出了一款专门为访问OpenAI设计的浏览器。 根据官方消息,这是一款专门为访问OpenAI优选网络设计的浏览器,它通过为用户提供专用的家庭网络出口,确保了快速、稳定的连接。 用这个浏览器的最大好处就是直接用浏…...
Wireshark 抓包工具与长ping工具pinginfoview使用,安装包
一、Wireshark使用 打开软件,选择以太网 1、时间设置时间显示格式 这个时间戳不易直观,我们修改 2、抓包使用的命令 1)IP地址过滤 ip.addr192.168.1.114 //筛选出源IP或者目的IP地址是192.168.1.114的全部数据包。 ip.sr…...
分享Pandas 数据分析实战课程
分享Pandas 数据分析实战课程,3 小时掌握数据分析核心技能。 链接:https://pan.baidu.com/s/1Ikk3I1dfoFO0id3EBZJdGg?pwd4y83 提取码:4y83 链接:https://pan.quark.cn/s/fa2acd7513f4 提取码:yWu7...
26. 删除有序数组中的重复项 (Swift版本)
题目描述 给你一个 非严格递增排列 的数组 nums ,请你删除重复出现的元素,使每个元素只出现一次 ,返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums 中唯一元素的个数。 考虑 nums 的唯一元素的数量为 k ࿰…...
python学生作业管理系统flask-django-nodejs-php
课题主要分为三大模块:即管理员模块和学生、教师模块,主要功能包括:学生、教师、作业信息、学习模块、教学评价、学习情况等; 关键词:学生作业管理系统;作业信息 目录 摘 要 I Abstrac II 目录 III 1绪论 1…...
蓝桥杯第二天刷真题
public class Main {public static void main(String [] args) { //存大数方法String s"202320232023"; // 定义一个字符串,它将被转换为结束循环的数值long end Long.parseLong(s);long sum 0;long primarynumber 1;for(int i 1; i<end; i) {long …...
RK3568 安装jupyter和jupyterlab
首先需要RK3568运行Ubuntu,之前的文章有关于如何安装Ubuntu以及遇到的问题 其次需要安装Miniconda3,详细安装教程:RK3568 安装Miniconda3-CSDN博客 准备好这两步之后就可以开始: 1、更新软件源和软件 sudo apt update sudo apt upgrade sudo apt-get dist-upgrade 2、…...
简易指南:国内ip切换手机软件怎么弄
在网络访问受到地域限制的情况下,使用国内IP切换手机软件可以帮助用户轻松访问被屏蔽的内容,扩展网络体验。以下是虎观代理小二分享的使用国内IP切换手机软件的简易指南。并提供一些注意事项。 如何在手机上使用国内IP切换软件 步骤一:选择I…...
Git学习笔记之Git 别名
Git 并不会在你输入部分命令时自动推断出你想要的命令。 如果不想每次都输入完整的 Git 命令,可以通过 git config 文件来轻松地为每一个命令设置一个别名。命令: git config --global alias.别名 命令例如 git config --global alias.co checkout git …...
网络安全笔记-day6,NTFS安全权限
文章目录 NTFS安全权限常用文件系统文件安全权限打开文件安全属性修改文件安全权限1.取消父项继承权限2.添加用户访问权限3.修改用户权限4.验证文件权限5.总结权限 强制继承父项权限文件复制移动权限影响跨分区同分区 总结1.权限累加2.管理员最高权限2.管理员最高权限 NTFS安全…...
云计算系统等保测评对象和指标选取
1、云计算服务模式与控制范围关系 参考GBT22239-2019《基本要求》附录D 云计算应用场景说明。简要理解下图,主要是云计算系统安全保护责任分担原则和云服务模式适用性原则,指导后续的测评对象和指标选取。 2、测评对象选择 测评对象 IaaS模式 PaaS模式…...
8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂(如抗体、抑制肽)在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上,高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术,但这类方法普遍面临资源消耗巨大、研发周期冗长…...
Caliper 配置文件解析:config.yaml
Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...
使用Spring AI和MCP协议构建图片搜索服务
目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式(本地调用) SSE模式(远程调用) 4. 注册工具提…...
CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝
目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为:一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...
django blank 与 null的区别
1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是,要注意以下几点: Django的表单验证与null无关:null参数控制的是数据库层面字段是否可以为NULL,而blank参数控制的是Django表单验证时字…...
掌握 HTTP 请求:理解 cURL GET 语法
cURL 是一个强大的命令行工具,用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中,cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...
Spring Security 认证流程——补充
一、认证流程概述 Spring Security 的认证流程基于 过滤器链(Filter Chain),核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤: 用户提交登录请求拦…...
门静脉高压——表现
一、门静脉高压表现 00:01 1. 门静脉构成 00:13 组成结构:由肠系膜上静脉和脾静脉汇合构成,是肝脏血液供应的主要来源。淤血后果:门静脉淤血会同时导致脾静脉和肠系膜上静脉淤血,引发后续系列症状。 2. 脾大和脾功能亢进 00:46 …...
GraphRAG优化新思路-开源的ROGRAG框架
目前的如微软开源的GraphRAG的工作流程都较为复杂,难以孤立地评估各个组件的贡献,传统的检索方法在处理复杂推理任务时可能不够有效,特别是在需要理解实体间关系或多跳知识的情况下。先说结论,看完后感觉这个框架性能上不会比Grap…...
内窥镜检查中基于提示的息肉分割|文献速递-深度学习医疗AI最新文献
Title 题目 Prompt-based polyp segmentation during endoscopy 内窥镜检查中基于提示的息肉分割 01 文献速递介绍 以下是对这段英文内容的中文翻译: ### 胃肠道癌症的发病率呈上升趋势,且有年轻化倾向(Bray等人,2018&#x…...
