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: ''}