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…

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

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

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

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

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

口干、眼干、皮肤干&#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…

[创业之路-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…

【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…

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

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

【开源库 | xlsxio】C/C++读写.xlsx文件,xlsxio 在 Linux(Ubuntu18.04)的编译、交叉编译

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; ⏰发布时间⏰&#xff1a; 2024-12-20 …

NACA四位数字翼型

NACA四位数字翼型&#xff0c;以NACA 2412为例 第一位数字2 —相对弯度 第二位数字4 —相对弯度所有位置&#xff08;单位化后的&#xff09; 最末两位数字12 —相对厚度 所有NACA四位数字翼型的&#xff08;相对厚度所在的位置&#xff09;

DataX与DataX-Web安装与使用

DataX github地址&#xff1a;DataX/introduction.md at master alibaba/DataX GitHub 环境准备 Linux环境系统 JDK&#xff08;1.8及其以上版本&#xff0c;推荐1.8&#xff09; Python&#xff08;2或者3都可以&#xff09; Apache Maven 3.x&#xff08;源码编译安装…

电子应用设计方案69:智能护眼台灯系统设计

智能护眼台灯系统设计 一、引言 随着人们对眼睛健康的重视&#xff0c;智能护眼台灯成为了越来越多人的选择。本设计方案旨在打造一款功能丰富、护眼效果显著且智能便捷的台灯系统。 二、系统概述 1. 系统目标 - 提供无频闪、无蓝光危害的均匀柔和光线&#xff0c;保护眼睛。…

cesium 常见的 entity 列表

Cesium 是一个用于创建3D地球和地图的开源JavaScript库。它允许开发者在Web浏览器中展示地理空间数据,并且支持多种类型的空间实体(entities)。 Entities是Cesium中用于表示地面上或空中的对象的一种高层次、易于使用的接口。它们可以用来表示点、线、多边形、模型等,并且可…

在Visual Studio 2022中配置C++计算机视觉库Opencv

本文主要介绍下载OpenCV库以及在Visual Studio 2022中配置、编译C计算机视觉库OpenCv的方法 1.Opencv库安装 ​ 首先&#xff0c;我们需要安装OpenCV库&#xff0c;作为一个开源库&#xff0c;我们可以直接在其官网下载Releases - OpenCV&#xff0c;如果官网下载过慢&#x…

【Java基础面试题035】什么是Java泛型的上下界限定符?

回答重点 Java泛型的上下界限定符用于对泛型类型参数进行范围限制&#xff0c;主要有上界限定符和下届限定符。 1&#xff09;上界限定符 (? extends T)&#xff1a; 定义&#xff1a;通配符?的类型必须是T或者T的子类&#xff0c;保证集合元素一定是T或者T的子类作用&…

WPF+MVVM案例实战与特效(四十七)-实现一个路径绘图的自定义按钮控件

文章目录 1、案例效果2、创建自定义 PathButton 控件1、定义 PathButton 类2、设计样式与控件模板3、代码解释3、控件使用4、直接在 XAML 中绑定命令3、源代码获取4、总结1、案例效果 2、创建自定义 PathButton 控件 1、定义 PathButton 类 首先,我们需要创建一个新的类 Pat…