最近的项目中要使用echarts实现显示风向以及风级的功能,在开发的过程中遇到了一点小问题,如何将单个symbol设置样式呢?
利用echarts组件实现出风级折线图,显示的值为风级,在每个拐点利用箭头显示当时风向。
本次需要展示的有两点:
1、风级2、风向
风级在制作的过程中很简单,就说在option中设置data的value值,在此就不多提。
风向的制作首先要了解拐点(symbol)的属性,将拐点样式设置为箭头图片(建议使用svg图),再使风向旋转对应的角度即可。
拐点(symbol)是echarts里的一个配置项,顾名思义拐点就是折线图曲线发生变化的点。
在此,为了更清晰的显示风向,我不建议使用ECharts提供的 'triangle'三角形,容易造成误解。
使用自定义图片的部分代码如下:
找到这个设置的我天真的以为立马就能实现这个功能,但是在设置symbolRotate之后,我发现了一个问题。这种方法只能设置整条折现拐点的旋转角度(所有拐点旋转角度相同),而我们的需求显然需要对单个拐点进行旋转。
在此特意说明下我的思路:1、自定义图片箭头,指向默认朝上(北)2、接口提供每个拐点需要的旋转角度,如:东(angle:90)、南(angle:180)、东南(angle:135)3、一共16个方向:南、北、东、西、东北、东南、西北、西南、东北偏北、东北偏东、西北偏西、西北偏北、西南偏西、西南偏南、东南偏东、东南偏南。
实现代码:
1、symbolRotate 的旋转方向为逆时针旋转,value为正数则逆时针旋转,若为负数则顺时针旋转。此设定与我起初的思路相反,导致实现效果的时候发现旋转角度与实际风向不对。
2、风向的指向为风的方向,而我起初以为北风箭头应该指向北,实则应该指向南方
综合上面两点,为了使角度指对,应该使用360°减去接口提供的度数。