风向，NNE表示北西北，根据风向的定义，从方位角在337.5°±11.25°范围内吹来的风的风向都记为NNW。

已于 2023-11-27 14:36:06 修改
阅读量4.9k 收藏 4
点赞数
分类专栏： 大屏 文章标签： javascript
于 2023-11-27 14:34:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45024453/article/details/134644187
版权
文章介绍了如何使用JavaScript和ECharts库在气象观测中创建一个显示风速和风向变化的24小时曲线图，包括风向的方位表示法和数据处理方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

理论：

在气象观测中，风向是指风的来向，地面风向用十六个方位表示，在气象服务过程中一般用汉语表述，在专业领域用英文字母表示，分别是：北（N）、东北东（NNE）、东北（NE）、东东北（ENE）、东（E）、东东南（ESE）、东南（SE）南东南（SSE）、南（S）、南西南（SSW）、西南（SW）、西西南（WSW）、西（W）、西西北（WNW）、西北（NW）、北西北（NNW）。根据风向的定义，从方位角在337.5°±11.25°范围内吹来的风的风向都记为NNW。

图表：

风向表

 代码：

 /**
     * 绘制24小时数据的曲线图-风速+风向
     * @param {object}
     * fs
     * fx
     * paramData  
     */
    drawFengsuChart: function (fs, fx, paramData) {
        if (fs.length == 0) return
        var arrowSize = 12
        let option = {
            backgroundColor: "rgba(48, 65, 90, 1)",
            // title: {
            //     text:  '风向风速信息',
            //     left: 'center'
            // },
            grid: {
                top: 40,
                bottom: 80,
                // left: 30,
                // right: 20
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    var ws = params[0].value[1];
                    if (!ws) {
                        ws = "无数据";
                    }
                    var wd = params[0].value[2];
                    if (wd == null) {
                        wd = "无数据";
                    } else {
                        var num = (params[0].value[2] + 11.24) / 22.5;
                        var index = Math.floor(num < 16 ? num : (num - 16));
                        var list = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'];
                        wd = list[index] + "," + params[0].value[2] + "°";
                    }
                    return [
                        echarts.format.formatTime('yyyy-MM-dd', params[0].value[0]) +
                        ' ' + echarts.format.formatTime('hh:mm', params[0].value[0]),
                        '风速：' + ws,
                        '风向：' + wd
                    ].join('<br>');
                }
            },
            legend: {
                textStyle: {
                    color: "#ffffff"
                },
                right: 10,
                top: 5,
                // top: '5%',
                // left: '50%',
                // selectedMode:false,//禁用点击
                data: ['风向(°)', '风速(m/s)']
            },
            xAxis: {
                type: 'time',
                // maxInterval: 3600 * 1000 * 24,
                splitNumber: 6,
                splitLine: {
                    lineStyle: {
                        color: '#ddd'
                    }
                },
                axisLine: {
                    onZero: false,
                    show: true,
                    lineStyle: {
                        color: "#ffffff"
                    },
                    symbol: ['none', 'arrow']
                },
                axisLabel: {
                    color: "#ffffff"
                },
            },
            yAxis: [{
                    name: '风速(m/s)',
                    splitLine: {
                        lineStyle: {
                            color: '#ddd'
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#ffffff"
                        },
                    },
                },
                {
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    nameTextStyle: {
                        color: "#ffffff"
                    },
                }
            ],
            visualMap: {
                show: false,
                type: "piecewise",
                orient: "vertical",
                right: 140,
                // orient: "horizontal",
                // left: "center",
                bottom: 140,
                pieces: [{
                        "lt": 11,
                        "color": "#18BF12",
                        "label": "微风（<11节）"
                    },
                    {
                        "gte": 11,
                        "lt": 17,
                        "color": "#f4e9a3",
                        "label": "中风（11~17节）"
                    },
                    {
                        "gte": 17,
                        "color": "#D33C3E",
                        "label": "大风（>=17节）"
                    },
                ],
                dimension: 1
            },
            series: [{
                    type: 'custom',
                    name: "风向(°)",
                    renderItem: function (param, api) {
                        var point = api.coord([
                            api.value(0),
                            api.value(1)
                        ]);

                        return {
                            type: 'path',
                            shape: {
                                pathData: 'M31 16l-15-15v9h-26v12h26v9z',
                                x: -arrowSize / 2,
                                y: -arrowSize / 2,
                                width: arrowSize,
                                height: arrowSize
                            },
                            rotation: -((Math.PI / 2) + (api.value(2) * Math.PI / 180)),
                            position: point,
                            style: api.style({
                                stroke: '#555',
                                lineWidth: 1
                            })
                        };
                    },
                    encode: {
                        x: 0,
                        y: 1
                    },
                    itemStyle: {
                        normal: {
                            color: "#F4E9A3",
                        }
                    },
                    data: fx,
                    z: 10
                },
                {
                    type: 'line',
                    name: "风速(m/s)",
                    symbol: 'none',
                    encode: {
                        x: 0,
                        y: 1
                    },
                    lineStyle: {
                        normal: {
                            color: '#FFAA44',
                            type: 'solid'
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: "#FFAA44",
                        }
                    },
                    data: fs,
                    z: 1
                }
            ]
        };
        let mainContainer = document.getElementById(paramData.echartId); //'guangxiHydro4'     
        //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
        const resizeMainContainer = function () {
            mainContainer.style.width = window.innerWidth + 'px';
            mainContainer.style.height = window.innerHeight * 0.5 + 'px';
        };
        //设置div容器高宽
        resizeMainContainer();
        // 初始化图表
        let myChart = echarts.getInstanceByDom(mainContainer); //有的话就获取已有echarts实例的DOM节点。
        if (myChart == null) { // 如果不存在，就进行初始化。
            myChart = echarts.init(mainContainer);
        }
        $(window).on('resize', function () { //
            //屏幕大小自适应，重置容器高宽
            resizeMainContainer();
            myChart.resize();
        });
        myChart.setOption(option);
    },

效果展示：

风向效果图

其它：

接口调取数据，下方是一些接口数据，

//fs:

[

['2023-11-27 01:00:00', 11.6, '东北'],

['2023-11-27 02:00:00', 11.6, '东北'],

['2023-11-27 03:00:00', 11.6, '东北'],

['2023-11-27 04:00:00', 11.1, '东北东'],

['2023-11-27 05:00:00', 11.6, '东北'],

['2023-11-27 06:00:00', 11.1, '东北东'],

['2023-11-27 07:00:00', 11.1, '东北东'],

['2023-11-27 08:00:00', 11.3, '东北东'],

['2023-11-27 09:00:00', 11.1, '东北东'],

['2023-11-27 10:00:00', 11.6, '东北'],

['2023-11-27 12:00:00', 11.6, '东北'],

['2023-11-27 13:00:00', 11.1, '东北东'],

['2023-11-27 14:00:00', 11.6, '东北'],

['2023-11-27 15:00:00', 11.1, '东北东'],

['2023-11-27 16:00:00', 11.1, '东北东'],

['2023-11-27 17:00:00', 11.3, '东北东'],

['2023-11-27 18:00:00', 11.7, '东北东'],

['2023-11-27 19:00:00', 11.3, '东北东'],

['2023-11-27 20:00:00', 11.7, '东北东'],

['2023-11-27 21:00:00', 11.1, '东北东'],

['2023-11-27 22:00:00', 11.7, '东北东'],

['2023-11-27 23:00:00', 11.3, '东北东'],

['2023-11-28 00:00:00', 11.7, '东北东']

]

//fx:

[

['2023-11-27 01:00:00', 11.6, 45],

['2023-11-27 02:00:00', 11.6, 45],

['2023-11-27 03:00:00', 11.6, 45],

['2023-11-27 04:00:00', 11.6, 45],

['2023-11-27 05:00:00', 11.6, 45],

['2023-11-27 06:00:00', 11.6, 45],

['2023-11-27 07:00:00', 11.6, 45],

['2023-11-27 08:00:00', 11.6, 45],

['2023-11-27 09:00:00', 11.5, 22.5],

['2023-11-27 10:00:00', 11, 22.5],

['2023-11-27 11:00:00', 11, 22.5],

['2023-11-27 12:00:00', 11, 22.5],

['2023-11-27 13:00:00', 11, 22.5],

['2023-11-27 14:00:00', 11.6, 45],

['2023-11-27 15:00:00', 11.6, 45],

['2023-11-27 16:00:00', 11.6, 45],

['2023-11-27 17:00:00', 11.6, 45],

['2023-11-27 18:00:00', 11.6, 45],

['2023-11-27 19:00:00', 11.3, 25],

['2023-11-27 20:00:00', 11.5, 22.5],

['2023-11-27 21:00:00', 11.5, 22.5],

['2023-11-27 22:00:00', 11.5, 22.5],

['2023-11-27 23:00:00', 11.5, 22.5],

['2023-11-28 00:00:00', 11.5, 22.5],

] 

//paramsData:

{nodeId: 'swiper-2', name: '风速/风向', iconUrl: 'icon_fengsu', unit: 'm/s', echartId: 'guangxiHydro2'} 

风向角度转风向
shiyilukou的博客
06-05 8451
private static final String[] directArr = new String[] { "北", "东北偏北", "东北", "东北偏东", "东", "东南偏东", "东南", "东南偏南", "南", "西南偏南", "西南", "西南偏西", "西", "西北偏西", "西北", "西北偏北" }; /** * ...
在excel中求算风向和风速范围的函数，用origin做风向玫瑰图
sinat_35373367的博客
01-28 8357
在excel中求算风向和风速范围的函数，用origin做风向玫瑰图 1.在excel中求算风向的函数： =IF(A2<=11.25,"N",IF(A2<=33.75,"NNE",IF(A2<=56.25,"NE",IF(A2<=78.75,"ENE",IF(A2<=101.25,"E",IF(A2<=123.75,"ESE",IF(A2<=146.25,"SE",IF(A2<=168.75,"SSE",IF(A2<=191.25,"S",IF(A2&
气象，风向说明
weixin_33877885的博客
01-08 1629
   0-360表示： 用角度表示风向，是把圆周分成360度，北风(N)是0度(即360度)，东风(E)是90度，南风(S)是180度，西风(W)是270度，其余的风向都可以由此计算出来。 private function getWind(u:Number,v:Number):Class { var c:Class=icon0; ...
搜索风向标代码 搜索风向标
07-24
搜索风向标代码 搜索风向标 (标签云---百度搜索风向标）
方位角的表示及示意图
GISSTAR的专栏
01-15 2万+
 方位角的表示： 北 N 0或360 南 S 180.0 北北东 NNE 22.5 南南西 SSW 202.5 东北 NE 45.0 西南 SW 225.0 东北东 ENE 67.5 西南西 WSW 247.5 东 E 90.0 西 W 270.0 东南东 ESE 112.5 西北西 WNW 292.5 东南 SE 135.0 西北 NW 315.0 南南东 SSE 157.5 北北西 NNW 3
Java 工具类：风向度数（角度°）转风向，附风向16方位图
beibei3321的博客
05-31 8680
开发过程中，经常会遇到风向数据处理，大都是风向的度数（°），如果直接进行展示，对用户来说不太友好，因此大都会转换成风向。
风向、风力等级
martinkeith的博客
11-09 9373
风向： 用角度表示风向，是把圆周分成360度，北风(N)是0度(即360度)，东风(E)是90度，南风(S)是180度，西风(W)是270度，其余的风向都可以由此计算出来。 风力等级对照表 ...
风向符号与度数对照表
zhy810302的专栏
08-23 1万+
风向杆：指出风的来向，表示为一根竖线。杆长约0.6～0.8厘米。杆的一端止于站圈（或站点上空某高度处），另一端指向风的来向，并在杆的末端填写风羽。风向常用8个方位（东、东南、南、西南、西、西北、北、东北）表示，在气象观测记录上则使用16个方位（除8个方位之外还有：北东北、东东北、东东南、南东南、南西南、西西南、西西北、北西北）表示。 ...
Batch Control_NNE.pdf
06-17
ISA-88在全球范围内被采纳为IEC-61512标准，它为批量控制提供了一个灵活的模块化框架，并强调了设计和运行灵活的批量工厂的良好实践，并可以与任何组合的手动和自动化设备控制相结合。ISA-88的第一部分明确针对使用...
风向16方位分类 和分别对应多少度
05-12
1. 北（N）：337.5°~22.5° 2. 北偏东（NNE）：22.5°~45° 3. 东北偏北（NEbN）：45°~67.5° 4. 东北（NE）：67.5°~90° 5. 东北偏东（NEbE）：90°~112.5° 6. 东（E）：112.5°~135° 7. 东南偏东（SEbE）：...
风向编码与度数对照表
最新发布
大气环境数据屋
10-16 4945
十六方位风向和静风的方位、符号、风向编码、中心角度及各风向角度范围对照表。八方位风向和静风的方位、符号、风向编码、中心角度及各风向角度范围对照表。
202Echarts - 自定义系列（Wind Barb）
阿甘兄
05-05 1060
效果图 源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js">&l...
JAVA WEB开发实战
06-07
走进JSP、掌握JSP语法、JSP内置对象、Servlet技术、综合实验（一）——JSP使用Model2实现登录模块、EL表达式语言、JSTL核心标签库、综合实验（二）——结合JSTL与EL技术开发通讯录模块、JSP操作XML、JavaScript脚本语言、综合实验（三）——Ajax实现用户注册模块——可以轻松领会Java Web程序开发的精髓，提高开发技能。
风力、风向角度 换算
lishirong_李世荣的专栏
12-02 2万+
风力换算表，节、蒲福、米/秒及公里/小时 节 蒲福 米/秒 公里/小时 标志 在海里的作用 在陆地的影响 1 0 0 - 0.2 1 风平 大海平静如镜 无气流，烟雾垂直上升 1-3 1 0.3-1.5 1-5 轻风 波纹柔和波峰不起白沫 几乎察觉不到，烟雾轻飘，风翼和风向标不动 4-6 2 1.6-3.3 6-11 微风 小的，短波浪，波峰光滑而不破碎 树叶在风中簌簌作响，风在面颊
python详解绘制风玫瑰图
码码的哈士奇
07-21 2万+
绘制风玫瑰图 # 导入包 import numpy as np import pandas as pd import matplotlib.pyplot as plt #-------设置支持中文----------------------# import matplotlib as mpl mpl.rcParams['font.sans-serif'] = ['SimHei'] #设置简黑字...
平均风向计算中对于风向角的判断
zuzuzxz的博客
04-24 7738
平均风向计算中对于风向角的判断 近期需要处理一系列监测时间内的平均风向，在网上搜索解决方案发现通过单位矢量法计算单位时间内平均风向算得的数据最为可靠且便于程序编写，但依照方法进行数据批量处理的过程中发现该方法求得的最终平均风向角无法直接应用，需要按照角位象限处理才可以使用，以下列出处理方法以并对偏差来源进行简单分析。 单位矢量法 单位矢量法计算公式： A为单位矢量平均风向 u为东西方位平均分量 ...
计算机网络中，16位校验和的实现
disking的博客
12-01 5234
#include #include #include #include #include using namespace std; struct M { int hegiht; int low; }; struct MM { M m1; M m2; }; MM add(MM g1, MM g2) { MM demo; int f[4] = { 0 }; int ff[4]
Pytorch nn.Embedding用法（包括加载预训练模型，加载Word2vec,加载glove）
热门推荐
真的是个瘦子
04-03 4万+
pytorch nn.Embedding class torch.nn.Embedding(num_embeddings, embedding_dim, padding_idx=None, max_norm=None, norm_type=2, scale_grad_by_freq=False, sparse=False) num_embeddings (int) - 嵌入字典的大小 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值