Echarts之风力风速玫瑰图

风力风速玫瑰图

前言
改进之路
代码如下
总结
链接

前言

今天上班收到任务，我们老大让我研究一下这个“风速风向玫瑰图”，还说这个是百度的雷达图的变异体，于是乎我直接找的雷达图，但是雷达图没有这种柱形的，都是点线，然后我又找了好久，最后突然在echarts官网上面看到了图1-2，才终于有了思路，原来这个图不是雷达图的变异体，而是极坐标系下的堆叠柱状图，于是就开始我的“改进”之路了。

图1-1
图1-2

改进之路

第一步是调整这个极坐标系，目标图数了数是48个方向，所以在angleAxis.data设置了48个数据，但是呢，只有八个方向是有label值的，其他的都设置为空就可以了，然后呢，发现标签是在每个刻度的中间，想让标签在相邻刻度的中间，发现是angleAxis.boundaryGap这个属性设为false就可以了，然后就是坐标轴在 grid 区域中的分隔线只让显示8条，我刚开始一直在改angleAxis.splitLine.interval（坐标轴分隔线的显示间隔，在类目轴中有效），但是怎么都没有用，后来看到了angleAxis.axisLabel（坐标轴刻度标签的相关设置），把angleAxis.axisLabel.interval（坐标轴刻度标签的显示间隔，在类目轴中有效）直接设置为5，一下子连刻度线的问题，都解决了，我在想应该是其他label都为空，混淆了我，一直以为label显示的是正确的。
然后就是柱形图的形状，需要先把柱形间隙去掉，发现是series[i]-bar.barCategoryGap这一属性值负责同一系列的柱间距离，默认为类目间距的20%，可设固定值，所以在这个地方直接设为0就ok了。整个图形都基本一直了，最后是坐标轴标签的背景图形，这些简单的问题了，直接参考radiusAxis.axisLabel就可以了。
最后是关于图例的问题，刚开始找图例的换行，但是搜索结果是图例项的换行，没有找到整个图例的换行，最后不知道就试了试legend.width直接就ok了。最后献上成果图（图1-3）。

图1-3

代码如下

  // app.title = '极坐标系下的堆叠柱状图';legendName=["0.1-2.3 m/s","2.3-4.5 m/s","4.5-6.7 m/s","6.7-8.9 m/s","8.9-11.0 m/s","11.0-13.2 m/s","13.2-15.4 m/s","15.4-17.6 m/s"],echarts.init(document.getElementById('echarts')).setOption( {tooltip: {trigger: 'item',textStyle: {fontSize: 16,color: '#fff',fontFamily: 'Microsoft YaHei'}},color:["#0001F7","#00B8FE","#00FFFF","#00FF68","#BEFE00","#FFFF00","#FFA800","#E10100"],angleAxis: {zlevel:2,type: 'category',data: [{value: '北'},{value: ''},  {value: ''},  {value: ''},  {value: ''},  {value: ''},{value: '东北'},{value: ''},  {value: ''},  {value: ''},  {value: ''},  {value: ''},{value: '东'},{value: ''},  {value: ''},  {value: ''},  {value: ''},  {value: ''},{value: '东南'},{value: ''},  {value: ''},  {value: ''},  {value: ''},  {value: ''},{value: '南'},{value: ''},  {value: ''},  {value: ''},  {value: ''},  {value: ''},{value: '西南'},{value: ''},  {value: ''},  {value: ''},  {value: ''},  {value: ''},{value: '西'},{value: ''},  {value: ''},  {value: ''},  {value: ''},  {value: ''},{value: '西北'},{value: ''},  {value: ''},  {value: ''},  {value: ''},  {value: ''},],boundaryGap:false,//标签和数据点都会在两个刻度之间的带(band)中间axisTick: {show: false//是否显示坐标轴刻度},show:true,splitLine: {show:true,lineStyle:{// color:"black"},},axisLabel:{show:true,interval:5,//坐标轴刻度标签的显示间隔，在类目轴中有效},},radiusAxis: {min:0,max:100,axisLabel: {formatter: '{value}   %',margin:-25,textStyle: {fontSize: 10,color: 'black',padding:5,width:30,backgroundColor:'lightgray',borderColor:'black',borderWidth:1,fontFamily: 'Microsoft YaHei'},rich: { }},zlevel:3,axisTick: {show: false//是否显示坐标轴刻度},axisLine:{show:true,//是否显示坐标轴轴线},},polar: {},series: [{barCategoryGap:0,type: 'bar',zlevel:1,data: [17, 2, 18, 4,2,3,4,6,1, 6, 3, 4,2,3,4,6,1, 2, 3, 4,2,3,4,6,1, 3, 3, 4,2,3,4,6,2,7,4,5,1, 2, 3, 1,2,3,2,6,1, 2, 3, 1,],coordinateSystem: 'polar',name: legendName[0],stack: 'a',itemStyle: {borderColor:'black',borderWidth:1,}}, {barCategoryGap:0,type: 'bar',data: [7, 12, 13, 2,2,3,4,6,1, 2, 3, 2,2,3,4,6,1, 2, 3, 5,2,3,4,6,1, 2, 3, 4,2,3,4,1,2,3,4,1,1, 2, 2, 4,2,3,5,1,1, 2, 3, 1,],coordinateSystem: 'polar',name: legendName[1],stack: 'a',itemStyle: {borderColor:'black',}}, {barCategoryGap:0,type: 'bar',data: [10, 12, 13, 4,2,13,14,26,11, 12, 23, 34,12,33,34,32,11, 22, 23, 24,2,23,24,6,21, 2, 3, 4,2,3,4,6,12,13,4,6,11, 32, 32, 14,12,33,24,41,1, 2, 3, 1,],coordinateSystem: 'polar',name: legendName[2],stack: 'a',itemStyle: {borderColor:'black',}}, {barCategoryGap:0,type: 'bar',data: [10, 2, 13, 2,2,3,4,6,1, 2, 3, 2,2,3,4,6,1, 2, 3, 5,2,3,4,6,1, 2, 3, 4,2,3,4,1,2,3,4,1,1, 2, 2, 4,1, 2, 3, 1,2,3,5,1,],coordinateSystem: 'polar',name: legendName[3],stack: 'a',itemStyle: {borderColor:'black',}}, {barCategoryGap:0,type: 'bar',data: [10, 2, 13, 4,2,3,4,6,1, 2, 3, 4,1, 2, 3, 1,2,3,4,2,1, 2, 3, 4,2,3,4,6,1, 2, 3, 4,2,3,4,6,2,3,4,6,1, 2, 3, 4,2,3,4,1,],coordinateSystem: 'polar',name: legendName[4],stack: 'a',itemStyle: {borderColor:'black',}}, {barCategoryGap:0,type: 'bar',data: [10, 2, 13, 2,2,3,4,6,1, 2, 3, 2,1, 2, 3, 1,2,3,4,6,1, 2, 3, 5,2,3,4,6,1, 2, 3, 4,2,3,4,1,2,3,4,1,1, 2, 2, 4,2,3,5,1,],coordinateSystem: 'polar',name: legendName[5],stack: 'a',itemStyle: {borderColor:'black',}}, {barCategoryGap:0,type: 'bar',data: [10, 2, 13, 4,2,3,4,6,1, 2, 3, 4,2,3,4,2,1, 2, 3, 4,2,3,4,6,1, 2, 3, 4,1, 2, 3, 1,2,3,4,6,2,3,4,6,1, 2, 3, 4,2,3,4,1,],coordinateSystem: 'polar',name: legendName[6],stack: 'a',itemStyle: {borderColor:'black',}}, {barCategoryGap:0,type: 'bar',data: [0, 0, 0, 0,0, 0, 0, 0,0, 0, 0, 0,0, 0, 0, 0,0, 0, 0, 0,1, 2, 3, 1,0, 0, 0, 0,1, 2, 3, 4,2,3,4,1,0, 0, 0, 0,1, 2, 2, 4,2,3,2,1,],coordinateSystem: 'polar',name: legendName[7],stack: 'a',itemStyle: {borderColor:'black',}}],legend: {show: true,data: legendName,width:500,//根据宽度调整换行}});

总结

最后说一下我的感想，echarts官网真的讲解的非常清楚，奉上地址（https://www.echartsjs.com/option.html#title），而且还有实例和社区，可以清楚的找到自己想要的相似的echars图然后加以改进。有什么问题大家可以一起交流交流。

链接

echarts官网