用echarts做风速风向折线图

最新推荐文章于 2024-03-22 08:30:00 发布

lllwyh

最新推荐文章于 2024-03-22 08:30:00 发布

阅读量5.3k

点赞数 2

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.csdn.net/woyunhan123/article/details/109244905

版权

本文介绍了如何使用echarts结合风速（m/s）和风向（度数）数据，创建出风速风向折线图。通过调整echarts的symbolRotate属性，实现了风向箭头的旋转，使得风向展示更直观。最终实现的效果图展示了这一转换过程。

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

因为功能需求，需要接收风速（m/s)、风向(度数)，来做折线图。看了网上的相关介绍，决定直接用echarts来做风速风向折线图（风向用度数来折线图展示实在不好看），具体效果图如下。

首先来介绍一下风向的方向和风向度数之间的关系.

风向的方向和风向度数之间的关系

也就说如果传过来的度数为0,就代表是北风,代表风向的箭头朝下.echarts有个属性symbolRotate来控制拐点图形旋转.

symbolRotate : 180 -windDirection(风向度数)

具体代码如下:

var data= [
            [0, 1,2020-05-01 00:00:00.000000],
            [280, 2,2020-05-16 00:00:00.000000],
            [260, 1,2020-05-07 00:00:00.000000],
            [290, 3,2020-05-08 00:00:00.000000],
            [240, 2,2020-05-15 00:00:00.

最低0.47元/天解锁文章