echarts渲染一个风向图

今天给大家说一个用echarts渲染一个风向图，这里图上其实有三个要素，风向，风级和能见度，主要还是讲讲代码里面的坑

1.风向图标方向修改以及设置

var ownData = echarts.util.map(windGrade, function (item, index) {
return {
value: windGrade[index],
symbolRotate:360-windDir[index]};
});

这里的ownData 包括了一个value和symbolRotate，第一个是风级的数值，第二个则是角度，官方说symbolRotate:windDir[index]，但是会发现图标的方向不对，于是自己根据实际展示需要做了调整，前面用360来减去对应的角度值

echarts官方是再series中的markPoint设置

symbol:'image://wind.png',
symbolSize:'26',，但是发现并不起作用，而是直接再series下进行symbol和symbolSize的设置

2.自定义tooltip显示内容

tooltip: {
formatter: function(params) {

这里的params，可以alert一下，看看具体值
//alert(JSON.stringify(params));
return '<p>时间：'+params[0].name+'</p><p><p>能见度：'+params[2].value+'</p><p>风级：'+params[1].value+'</p><p>风向：'+params[0].value+'</p>';
},
trigger: 'axis',
axisPointer: {
animation: false
}
},

 

3.禁止图标拖拽操作

将dataZoom设置取消，因为会发现设置之后，对应值会报错，说value未找到，并且上下的数据横轴对应不齐

4.所有节点数据都显示出来

echarts默认会根据div的宽度来展示数据节点名称，如果向全部显示，再series设置showAllSymbol: true,即可

转载于:https://www.cnblogs.com/shenwh/p/10444504.html