echarts画风向杆

1.安装echarts

2.引入echarts

4.获取数据,转换数据格式

windProfile.title.text = `${moment(time.searchTime[0], ‘YYYY-MM-DD HH:mm:ss’).format(

‘YYYY-MM-DD HH:mm’

)}-${moment(time.searchTime[1], ‘YYYY-MM-DD HH:mm:ss’).format(‘YYYY-MM-DD HH:mm’)}——水平风风羽图`

data.forEach(item => {

windProfile.xAxis.data.push(moment(item.time, ‘YYYY-MM-DD HH:mm:ss’).format(‘HH:mm’))

arr = item.fengKuoXianItems.filter(

i => heightRange.less * 1000 <= i.height && i.height <= heightRange.greater * 1000

)

arr.forEach(item1 => {

if (item1.direction && item1.speed) {

windProfile.series[0].data.push({

value: [

moment(item.time, ‘YYYY-MM-DD HH:mm:ss’).format(‘HH:mm’),

item1.height,

transformationSpeed(item1.speed),

item1.direction > 9999 ‘’ : getWindPower(item1.direction),

item1.speed > 9999 ‘’ : getWindSpeed(item1.speed),

item1.speed > 9999 ‘’ : item1.speed.toFixed(2)

],

label: {

rotate: -item1.direction,

color: `rgba(${getColor(colorData.value[0].stops, item1.speed).stop.join(‘,’)})`

}

})

}

})

})

1)转换字体根据风速转字体

const transformation = [

//风速转字体

[1, ‘m’, 0],

[3, ‘k’, 1],

[5, ‘1’, 2],

[7, ‘2’, 3],

[9, ‘3’, 4],

[11, ‘4’, 5],

[13, ‘5’, 6],

[15, ‘6’, 7],

[17, ‘7’, 8],

[19, ‘n’, 9],

[21, ‘8’, 10],

[23, ‘9’, 11],

[25, ‘:’, 12],

[27, ‘;’, 13],

[29, ‘<’, 14],

[31, ‘=’, 15],

[33, ‘>’, 16],

[35, ‘’, 17],

[37, ‘@’, 18],

[39, ‘A’, 19],

[41, ‘B’, 20],

[43, ‘C’, 21],

[45, ‘D’, 22],

[47, ‘E’, 23],

[49, ‘F’, 24],

[51, ‘G’, 25],

[53, ‘H’, 26],

[55, ‘I’, 27],

[57, ‘J’, 28],

[999, ‘K’, 28]

]

//根据风速转字体

const transformationSpeed = speed => {

for (let t = 0; t < transformation.length; t++) if (Number(speed) <= transformation[t][0]) return transformation[t][1]

return ‘0’

}

注意修改echarts里series的配置项

2)转换风向

const windPower = [

//风向

[11.25, ‘北风’],

[33.75, ‘东北风’],

[56.25, ‘东北风’],

[78.75, ‘东北风’],

[101.25, ‘东风’],

[123.75, ‘东南风’],

[146.25, ‘东南风’],

[168.75, ‘东南风’],

[191.25, ‘南风’],

[213.75, ‘西南风’],

[236.25, ‘西南风’],

[258.75, ‘西南风’],

[281.25, ‘西风’],

[303.75, ‘西北风’],

[326.25, ‘西北风’],

[348.75, ‘西北风’],

[1e3, ‘西北风’]

]

// 获取风向

const getWindPower = e => {

for (let t = 0; t < windPower.length; t++) if (e < windPower[t][0]) return windPower[t][1]

return ‘无风’

}

3)转换风速

const windSpeed = [

//风速

[0.2, 0],

[1.5, 1],

[3.3, 2],

[5.4, 3],

[7.9, 4],

[10.7, 5],

[13.8, 6],

[17.1, 7],

[20.7, 8],

[24.4, 9],

[28.4, 10],

[32.6, 11],

[36.9, 12],

[41.4, 13],

[46.1, 14],

[50.9, 15],

[56, 16],

[61.2, 17]

]

//获取风速

const getWindSpeed = e => {

for (let t = 0; t < windSpeed.length; t++) if (e < windSpeed[t][0]) return windSpeed[t][1].toFixed(2)

return ‘0’

}

4)转换风字体颜色

const colorData = ref([

{

stops: [

{ value: 0.2, stop: [176, 224, 248, 1] },

{ value: 2.6, stop: [144, 208, 248, 1] },

{ value: 3.4, stop: [120, 184, 248, 1] },

{ value: 5.5, stop: [80, 160, 240, 1] },

{ value: 8, stop: [60, 120, 220, 1] },

{ value: 10.8, stop: [40, 100, 200, 1] },

{ value: 13.9, stop: [0, 176, 8, 1] },

{ value: 17.2, stop: [248, 248, 0, 1] },

{ value: 20.8, stop: [248, 168, 0, 1] },

{ value: 24.5, stop: [248, 80, 0, 1] },

{ value: 28.5, stop: [248, 0, 0, 1] },

{ value: 32.7, stop: [248, 24, 80, 1] },

{ value: 37, stop: [240, 48, 152, 1] },

{ value: 46.2, stop: [232, 80, 232, 1] },

{ value: 51, stop: [224, 72, 72, 1] },

{ value: 56.1, stop: [200, 56, 56, 1] },

{ value: 61.3, stop: [160, 24, 32, 1] }

],

fieldName: ‘wind’

}

])

// 风字体颜色

const getColor = (e, speed) => {

let n = e[e.length - 1]

const i = e.find(e => {

if (speed <= e.value) return (n = e), n

})

return i && (n = i), n

}

欢迎补充,一起进步。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/64867.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux系统编程——理解系统内核中的信号捕获

目录 一、sigaction() 使用 信号捕捉技巧 二、可重入函数 三、volatile关键字 四、SIGCHLD信号 在信号这一篇中我们已经学习到了一种信号捕捉的调用接口&#xff1a;signal(),为了深入理解操作系统内核中的信号捕获机制&#xff0c;我们今天再来看一个接口&#xff1a;si…

HTTP、HTTPS和SOCKS5代理協議

一、HTTP代理協議 HTTP代理是最基礎、使用最廣泛的代理協議之一。它主要用於處理HTTP協議的數據請求&#xff0c;即流覽網頁時的數據傳輸。HTTP代理的工作原理相對簡單&#xff1a;當用戶向網站發送請求時&#xff0c;HTTP代理伺服器首先接收該請求&#xff0c;然後將其轉發給…

IEC104 协议 | 规约帧格式 / 规约调试

注&#xff1a;本文为 “ IEC104 协议” 相关文章合辑。 未整理去重&#xff0c;如有内容异常请看原文。 图片清晰度限于引文原状。 从零开始理解 IEC104 协议之一 ——104 规约帧格式 洪城小电工 IP 属地&#xff1a;江西 2020.06.10 00:30:54 前言 本文根据相关标准、本…

代码随想录训练营第二十七天| 贪心理论基础 455.分发饼干 376. 摆动序列 53. 最大子序和

贪心没有套路&#xff0c;说白了就是常识性推导加上举反例 今天的内容比较简单 简单了解贪心是通过局部最优解反推全局最优解&#xff08;有经验成分&#xff09; 455.分发饼干 题目链接&#xff1a;455. 分发饼干 - 力扣&#xff08;LeetCode&#xff09; 讲解链接&#xff…

WPS如何快速将数字金额批量转换成中文大写金额,其实非常简单

大家好&#xff0c;我是小鱼。 在日常的工作中经常会遇到需要使用金额大写的情况&#xff0c;比如说签订业务合同时一般都会标注大写金额&#xff0c;这样是为了安全和防止串改。但是很多人也许不太熟悉金额大写的方法和习惯&#xff0c;其它没有关系&#xff0c;我们在用WPS制…

Vue3之Pinia

在前端开发中&#xff0c;随着应用程序的规模和复杂性增加&#xff0c;状态管理成为了不可或缺的一部分。Pinia作为Vue 3的专属状态管理库&#xff0c;以其轻量级、易用性和灵活性&#xff0c;逐渐成为了Vue开发者的新宠。本文将详细介绍Pinia的基本概念、功能特点、应用场景、…

MHA binlog server

GTID模式下切换的时候&#xff0c;默认是不会去Master上获取binlog&#xff0c;如果配置了Binlog Server&#xff0c;MHA机会去binlog-server上获取&#xff0c;下面创建一个binlog server&#xff0c;并验证binlog server能够在主库binlog被清理的情况下提供日志恢复. 搭建bi…

针对超大规模病理图像分析!华中科技大学提出医学图像分割模型,提高干燥综合征诊断准确性

口干、眼干、皮肤干&#xff0c;每天伴有不明原因的肌肉酸痛和全身乏力&#xff0c;如果以上症状你「中招」了&#xff0c;除了考虑冬季天气干燥外&#xff0c;还应该警惕一种常见却总是被我们忽视的疾病——干燥综合征 (Sjgren’s Syndrome, SS)。 干燥综合征是以外分泌腺高度…

本地部署 LLaMA-Factory

本地部署 LLaMA-Factory 1. 本地部署 LLaMA-Factory2. 下载模型3. 微调模型3-1. 下载数据集3-2. 配置参数3-3. 启动微调3-4. 模型评估3-5. 模型对话 1. 本地部署 LLaMA-Factory 下载代码&#xff0c; git clone https://github.com/hiyouga/LLaMA-Factory.git cd LLaMA-Facto…

GPU环境配置

ubuntu基本环境配置 1. 更新包列表 sudo apt-get update sudo apt upgrade 2. 安装英伟达显卡驱动 使用wget在命令行下载驱动包 wget https://cn.download.nvidia.com/XFree86/Linux-x86_64/550.100/NVIDIA-Linux-x86_64-550.100.run 上面使用的是4090版本的&#xff0c;…

[创业之路-199]:《华为战略管理法-DSTE实战体系》- 3 - 价值转移理论与利润区理论

目录 一、价值转移理论 1.1. 什么是价值&#xff1f; 1.2. 什么价值创造 &#xff08;1&#xff09;、定义 &#xff08;2&#xff09;、影响价值创造的因素 &#xff08;3&#xff09;、价值创造的三个过程 &#xff08;4&#xff09;、价值创造的实践 &#xff08;5&…

ASP.NET |日常开发中定时任务详解

ASP.NET &#xff5c;日常开发中定时任务详解 前言一、定时任务的概念与用途1.1 定义1.2 应用场景 二、在ASP.NET中实现定时任务的方式2.1 使用System.Timers.Timer2.2 使用Quartz.NET 三、定时任务的部署与管理3.1 部署考虑因素3.2 管理与监控 结束语优质源码分享 ASP.NET &am…

安装openGauss数据库一主一备

安装openGauss数据库一主一备 一.安装准备1.修改/etc/selinux/config文件中的“SELINUX”值为“disabled”。2.重新启动操作系统。3.检查防火墙是否关闭。4.关闭防火墙并禁止开机重启。5.关闭交换内存6.设置主机名7.设置解析主机名和 IP 地址8.安装相关依赖包9.创建单独的用户组…

【unity】【游戏开发】Unity项目一运行就蓝屏报Watch Dog Timeout

【背景】 由于是蓝屏所以没法截屏&#xff0c;总之今天遇到了一开Unity&#xff0c;过一阵就蓝屏的情况&#xff0c;报Watch Dog Timeout。 【分析】 通过任务管理器查看&#xff0c;发现Unity占用率100%&#xff0c;再观察Unity内部&#xff0c;每次右下角出现一个Global I…

如何从 0 到 1 ,打造全新一代分布式数据架构

导读&#xff1a;本文从 DIKW&#xff08;数据、信息、知识、智慧&#xff09; 模型视角出发&#xff0c;探讨数字世界中数据的重要性问题。接着站在业务视角&#xff0c;讨论了在不断满足业务诉求&#xff08;特别是 AI 需求&#xff09;的过程中&#xff0c;数据系统是如何一…

java全栈day20--Web后端实战(Mybatis基础2)

一、Mybatis基础 1.1辅助配置 配置 SQL 提示。 默认在 mybatis 中编写 SQL 语句是不识别的。可以做如下配置&#xff1a; 现在就有sql提示了 新的问题 产生原因&#xff1a; Idea 和数据库没有建立连接&#xff0c;不识别表信息 解决方式&#xff1a;在 Idea 中配置 MySQL 数…

深度学习每周学习总结J9(Inception V3 算法实战与解析 - 天气识别)

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 目录 0. 总结Inception V1 简介Inception V3 简介1. 设置GPU2. 导入数据及处理部分3. 划分数据集4. 模型构建部分5. 设置超参数&#xff1…

[Effective C++]条款38-39 复合和private继承

本文初发于 “天目中云的小站”&#xff0c;同步转载于此。 条款38 : 通过复合塑膜出has-a或"is-implemented-in-terms-of" 在条款32中我们认识了public继承意味着is-a, 本条款将会认识两个新的关系, 均可通过"复合"这一操作实现出来. 复合 所谓复合, 就是…

重温设计模式--中介者模式

中介者模式介绍 定义&#xff1a;中介者模式是一种行为设计模式&#xff0c;它通过引入一个中介者对象来封装一系列对象之间的交互。中介者使得各个对象之间不需要显式地相互引用&#xff0c;从而降低了它们之间的耦合度&#xff0c;并且可以更方便地对它们的交互进行管理和协调…

LeetCode 1661. 每台机器的进程平均运行时间

LeetCode 1661. 每台机器的进程平均运行时间 表: Activity ----------------------- | Column Name | Type | ----------------------- | machine_id | int | | process_id | int | | activity_type | enum | | timestamp | float | ----------------------- 该表展示了一家工厂…