最近的项目中要使用echarts实现显示风向以及风级的功能，在开发的过程中遇到了一点小问题，如何将单个symbol设置样式呢？
需求
利用echarts组件实现出风级折线图，显示的值为风级，在每个拐点利用箭头显示当时风向。
需求图
要点
本次需要展示的有两点：
1、风级
2、风向
风级在制作的过程中很简单，就说在option中设置data的value值，在此就不多提。
风向的制作首先要了解拐点（symbol）的属性，将拐点样式设置为箭头图片（建议使用svg图），再使风向旋转对应的角度即可。
拐点(symbol)
拐点(symbol)是echarts里的一个配置项，顾名思义拐点就是折线图曲线发生变化的点。
拐点示意图
设置自定义图片
ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。
URL 为图片链接例如：'image://http://xxx.xxx.xxx/a/b.png'
在此，为了更清晰的显示风向，我不建议使用ECharts提供的 'triangle'三角形，容易造成误解。
使用自定义图片的部分代码如下：
if(this.airIndex == 'wdsp'){ //旋转风向
var arr = [];
seriesItem.symbol = 'image://img/arrow.svg';
seriesItem.data = arr;
}else{
seriesItem.symbolSize = 8;
}
this.selectedDevData.push(seriesItem);
部分代码
旋转拐点
查询了一番echarts文档后，终于找到了这个属性——symbolRotate，点我了解该属性。
找到这个设置的我天真的以为立马就能实现这个功能，但是在设置symbolRotate之后，我发现了一个问题。
这种方法只能设置整条折现拐点的旋转角度（所有拐点旋转角度相同），而我们的需求显然需要对单个拐点进行旋转。
在此特意说明下我的思路：
1、自定义图片箭头，指向默认朝上（北）
2、接口提供每个拐点需要的旋转角度，如：东（angle:90）、南（angle:180）、东南（angle:135）
3、一共16个方向：南、北、东、西、东北、东南、西北、西南、东北偏北、东北偏东、西北偏西、西北偏北、西南偏西、西南偏南、东南偏东、东南偏南。
实现代码：
var symbolRotateNum = [90,45,50,12,10,0,150];// 旋转的度数
var valueNum = [820, 932, 901, 934, 1290, 1330, 1320];// 数值
var data = echarts.util.map(valueNum, function (item, index) {
return {
value: valueNum[index],
symbolRotate:symbolRotateNum[index]
};
});
部分代码
我在Echarts Gallery上传了实例，有现成代码在上面，点我查看实例
排坑
虽然实现了功能，但是在开发的过程中还是踩到了坑的，在此特意分享给大家。
1、symbolRotate 的旋转方向为逆时针旋转，value为正数则逆时针旋转，若为负数则顺时针旋转。此设定与我起初的思路相反，导致实现效果的时候发现旋转角度与实际风向不对。
2、风向的指向为风的方向，而我起初以为北风箭头应该指向北，实则应该指向南方
综合上面两点，为了使角度指对，应该使用360°减去接口提供的度数。
symbolRotate: 360-seriesItem.angle[index]
方向应该指向反向，所以需要再调整180°
symbolRotate:180-seriesItem.angle[index]
最终效果如下：
最终效果
网友评论