angleAxis-radiusAxis极轴完全指南

📋 概述

**angleAxis和radiusAxis（极坐标系的角轴和径轴）**是与polar配合使用的坐标轴组件。angleAxis控制角度方向的刻度和标签，radiusAxis控制半径方向的刻度和标签，两者共同定义极坐标系的网格结构。

核心价值

• 角度控制：精确控制圆周的角度分布
• 径向刻度：灵活设置半径范围和分段
• 圆形网格：构建美观的极坐标网格系统
• 多维展示：与polar结合实现玫瑰图、雷达图等

---

🎯 核心概念

1. 基础配置

option = {
  polar: {},
  
  angleAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D'],
    startAngle: 90 // 从顶部开始
  },
  
  radiusAxis: {
    type: 'value',
    min: 0,
    max: 100
  },
  
  series: [{
    type: 'bar',
    coordinateSystem: 'polar',
    data: [10, 20, 30, 40]
  }]
};

---

🔧 详细配置项

完整angleAxis配置

option = {
  angleAxis: {
    // === 类型 ===
    type: 'category', // 'category' | 'value' | 'time' | 'log'
    
    // === 类目数据 ===
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    
    // === 起始角度 ===
    startAngle: 90, // 从90度（顶部）开始
    
    // === 方向 ===
    clockwise: true, // true=顺时针，false=逆时针
    
    // === 边界留白 ===
    boundaryGap: true,
    
    // === 最小最大值（数值轴）===
    min: 0,
    max: 360,
    
    // === 分割段数 ===
    splitNumber: 7,
    
    // === 轴线样式 ===
    axisLine: {
      show: true,
      lineStyle: {
        color: '#888',
        width: 1
      }
    },
    
    // === 刻度样式 ===
    axisTick: {
      show: true,
      length: 5,
      lineStyle: {
        color: '#888'
      }
    },
    
    // === 标签样式 ===
    axisLabel: {
      show: true,
      color: '#333',
      fontSize: 11,
      rotate: 0, // 旋转角度
      formatter: '{value}'
      // formatter: function(value) {
      //   return value + '天';
      // }
    },
    
    // === 分割线 ===
    splitLine: {
      show: true,
      interval: 'auto',
      lineStyle: {
        color: '#eee',
        type: 'dashed',
        width: 1
      }
    },
    
    // === 分隔区域 ===
    splitArea: {
      show: false,
      areaStyle: {
        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
      }
    }
  }
};

完整radiusAxis配置

option = {
  radiusAxis: {
    // === 类型 ===
    type: 'value', // 'value' | 'category' | 'log'
    
    // === 范围 ===
    min: 0,
    max: 100,
    
    // === 反向 ===
    inverse: false,
    
    // === 名称 ===
    name: '数值',
    nameLocation: 'end',
    nameGap: 10,
    nameTextStyle: {
      color: '#333',
      fontSize: 12
    },
    
    // === 轴线 ===
    axisLine: {
      show: true,
      lineStyle: {
        color: '#888'
      }
    },
    
    // === 刻度 ===
    axisTick: {
      show: true,
      length: 5
    },
    
    // === 标签 ===
    axisLabel: {
      show: true,
      color: '#666',
      formatter: '{value}'
      // formatter: function(value) {
      //   return value.toFixed(0);
      // }
    },
    
    // === 分割线 ===
    splitLine: {
      show: true,
      lineStyle: {
        color: '#eee',
        type: 'solid'
      }
    },
    
    // === 分隔区域 ===
    splitArea: {
      show: false
    }
  }
};

---

💡 实战案例

案例1：周活动分布

option = {
  title: {
    text: '一周活动分布',
    left: 'center'
  },
  
  tooltip: {
    trigger: 'axis'
  },
  
  polar: {
    center: ['50%', '55%'],
    radius: '60%'
  },
  
  angleAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    startAngle: 90,
    axisLabel: {
      color: '#333'
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#eee',
        type: 'dashed'
      }
    }
  },
  
  radiusAxis: {
    type: 'value',
    min: 0,
    max: 100,
    axisLabel: {
      formatter: '{value}%'
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#eee'
      }
    }
  },
  
  series: [{
    type: 'bar',
    coordinateSystem: 'polar',
    data: [65, 78, 90, 85, 72, 88, 95],
    itemStyle: {
      color: '#5470c6',
      borderRadius: [5, 5, 0, 0]
    }
  }]
};

案例2：24小时热力图

const hours = Array.from({length: 24}, (_, i) => `${i}:00`);

option = {
  polar: {
    radius: '70%'
  },
  
  angleAxis: {
    type: 'category',
    data: hours,
    startAngle: 90,
    axisLabel: {
      interval: 2, // 每隔2个显示
      formatter: function(value) {
        return value.replace(':00', '');
      }
    }
  },
  
  radiusAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  
  visualMap: {
    min: 0,
    max: 100,
    inRange: {
      color: ['#313695', '#fee090', '#d73027']
    }
  },
  
  series: [{
    type: 'heatmap',
    coordinateSystem: 'polar',
    data: generateHeatmapData()
  }]
};

---

⚠️ 常见问题

问题1：标签重叠

解决：

angleAxis: {
  axisLabel: {
    interval: 1, // 间隔显示
    rotate: 45,  // 旋转
    formatter: function(value) {
      return value.length > 3 ? value.substring(0, 3) : value;
    }
  }
}

问题2：起始位置不对

解决：

// 调整startAngle
angleAxis: {
  startAngle: 90,  // 从顶部开始
  // startAngle: 0,   // 从右侧开始
  // startAngle: 180, // 从底部开始
  // startAngle: 270, // 从左侧开始
}

---

🎯 最佳实践

1. 选择合适的startAngle

// 从顶部开始（推荐）
startAngle: 90

// 从右侧开始
startAngle: 0

// 根据业务场景选择

2. 控制标签密度

// 类别多时间隔显示
angleAxis: {
  axisLabel: {
    interval: Math.ceil(data.length / 12) // 最多显示12个
  }
}

---

📊 性能指标

配置	渲染时间	建议
简单极轴	3ms	无限制
带分割线	5ms	正常
类别>20	10ms	间隔显示标签

---

🔗 相关链接

• polar极坐标系
• 雷达图高级.md)

---

💎 总结

极轴核心价值：

• ✅ 精确控制角度和半径
• ✅ 构建极坐标网格系统
• ✅ 支持多种轴类型
• ✅ 与polar完美配合

关键配置原则：

1. startAngle：选择合适的起始角度
2. clockwise：确定顺时针还是逆时针
3. 标签防重叠：使用interval和rotate
4. 分割线美化：dashed虚线更美观

掌握极轴，让圆形图表更精准！🎯

极坐标柱状图

{
  "title": {
    "text": "极坐标数据展示",
    "left": "center"
  },
  "tooltip": {
    "trigger": "axis"
  },
  "angleAxis": {
    "type": "category",
    "data": [
      "周一",
      "周二",
      "周三",
      "周四",
      "周五",
      "周六",
      "周日"
    ],
    "startAngle": 75
  },
  "radiusAxis": {
    "type": "value"
  },
  "polar": {},
  "series": [
    {
      "type": "bar",
      "data": [
        120,
        200,
        150,
        80,
        70,
        110,
        130
      ],
      "coordinateSystem": "polar",
      "itemStyle": {
        "color": "#5470c6"
      }
    }
  ]
}