polar极坐标系完全指南

📋 概述

**polar（极坐标系）**是一种使用角度和半径来表示数据位置的坐标系统，适用于制作饼图、雷达图、南丁格尔玫瑰图等圆形图表。它提供了与直角坐标系完全不同的视觉呈现方式。

核心价值

• 圆形布局：360度环形展示数据
• 径向对比：通过半径长度直观对比数值
• 角度分布：用角度表示类别或时间
• 美观独特：不同于传统柱状图的视觉效果

---

🎯 核心概念

1. 极坐标基础

option = {
  polar: {
    center: ['50%', '50%'], // 圆心位置
    radius: '70%'            // 半径
  },
  
  angleAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D']
  },
  
  radiusAxis: {
    type: 'value'
  },
  
  series: [{
    type: 'bar',
    coordinateSystem: 'polar', // 使用极坐标系
    data: [10, 20, 30, 40]
  }]
};

2. 数据结构

// 极坐标数据：[角度索引, 半径值]
const polarData = [
  [0, 10],  // 第1个角度，值为10
  [1, 20],  // 第2个角度，值为20
  [2, 30],  // 第3个角度，值为30
  [3, 40]   // 第4个角度，值为40
];

---

🔧 详细配置项

完整polar配置

option = {
  title: {
    text: '极坐标系示例',
    left: 'center'
  },
  
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  
  // === 极坐标配置 ===
  polar: {
    // 圆心位置
    center: ['50%', '50%'],
    
    // 半径（可以是百分比或像素）
    radius: '70%',
    
    // 背景
    backgroundColor: 'transparent',
    
    // 边框
    borderColor: '#ccc',
    borderWidth: 0,
    
    // 阴影
    shadowBlur: 10,
    shadowColor: 'rgba(0, 0, 0, 0.1)'
  },
  
  // === 角度轴 ===
  angleAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    
    // 起始角度
    startAngle: 90, // 从顶部开始
    
    // 顺时针/逆时针
    clockwise: true,
    
    // 轴线样式
    axisLine: {
      show: true,
      lineStyle: {
        color: '#888',
        width: 1
      }
    },
    
    // 刻度标签
    axisLabel: {
      show: true,
      color: '#333',
      fontSize: 11
    },
    
    // 分割线
    splitLine: {
      show: true,
      lineStyle: {
        color: '#eee',
        type: 'dashed'
      }
    },
    
    // 分隔区域
    splitArea: {
      show: false,
      areaStyle: {
        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
      }
    }
  },
  
  // === 半径轴 ===
  radiusAxis: {
    type: 'value',
    min: 0,
    max: 100,
    
    // 轴线样式
    axisLine: {
      show: true,
      lineStyle: {
        color: '#888'
      }
    },
    
    // 刻度标签
    axisLabel: {
      show: true,
      color: '#333',
      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]
    },
    
    // 堆叠
    stack: 'a'
  }]
};

---

💡 实战案例

案例1：南丁格尔玫瑰图

option = {
  title: {
    text: '销售占比玫瑰图',
    subtext: '半径和角度同时表示数值',
    left: 'center'
  },
  
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)'
  },
  
  legend: {
    orient: 'vertical',
    right: 'right',
    data: ['产品A', '产品B', '产品C', '产品D', '产品E']
  },
  
  polar: {
    center: ['40%', '50%'],
    radius: '60%'
  },
  
  angleAxis: {
    type: 'category',
    data: ['产品A', '产品B', '产品C', '产品D', '产品E'],
    startAngle: 90
  },
  
  radiusAxis: {
    type: 'value',
    min: 0
  },
  
  series: [{
    type: 'bar',
    coordinateSystem: 'polar',
    data: [
      { value: 320, name: '产品A' },
      { value: 280, name: '产品B' },
      { value: 250, name: '产品C' },
      { value: 220, name: '产品D' },
      { value: 180, name: '产品E' }
    ],
    itemStyle: {
      color: function(params) {
        const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'];
        return colors[params.dataIndex];
      }
    },
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(0, 0, 0, 0.3)'
      }
    }
  }]
};

案例2：周活动热力图

const hours = Array.from({length: 24}, (_, i) => `${i}:00`);
const days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];

// 生成24×7的数据
const data = [];
for (let day = 0; day < 7; day++) {
  for (let hour = 0; hour < 24; hour++) {
    const value = Math.floor(Math.random() * 100);
    data.push([hour, day, value]);
  }
}

option = {
  title: {
    text: '用户活跃度热力图',
    left: 'center'
  },
  
  tooltip: {
    formatter: function(params) {
      return `${days[params.value[1]]} ${hours[params.value[0]]}<br/>
              活跃度: ${params.value[2]}`;
    }
  },
  
  polar: {
    center: ['50%', '50%'],
    radius: '70%'
  },
  
  angleAxis: {
    type: 'category',
    data: hours,
    startAngle: 90
  },
  
  radiusAxis: {
    type: 'category',
    data: days
  },
  
  visualMap: {
    min: 0,
    max: 100,
    calculable: true,
    orient: 'horizontal',
    left: 'center',
    bottom: '5%',
    inRange: {
      color: ['#313695', '#4575b4', '#fee090', '#d73027']
    }
  },
  
  series: [{
    type: 'heatmap',
    coordinateSystem: 'polar',
    data: data
  }]
};

案例3：雷达柱状混合图

option = {
  title: {
    text: '能力评估雷达柱状图',
    left: 'center'
  },
  
  tooltip: {
    trigger: 'axis'
  },
  
  legend: {
    data: ['当前水平', '目标水平'],
    top: 30
  },
  
  polar: {
    center: ['50%', '55%'],
    radius: '60%'
  },
  
  angleAxis: {
    type: 'category',
    data: ['技术', '沟通', '管理', '创新', '协作'],
    startAngle: 90
  },
  
  radiusAxis: {
    type: 'value',
    max: 100
  },
  
  series: [
    {
      name: '当前水平',
      type: 'bar',
      coordinateSystem: 'polar',
      data: [85, 78, 72, 88, 90],
      itemStyle: {
        color: '#5470c6'
      }
    },
    {
      name: '目标水平',
      type: 'bar',
      coordinateSystem: 'polar',
      data: [90, 85, 80, 92, 95],
      itemStyle: {
        color: '#91cc75'
      }
    }
  ]
};

---

⚠️ 常见问题

问题1：标签重叠

解决：

angleAxis: {
  axisLabel: {
    formatter: function(value) {
      // 缩短长文本
      return value.length > 4 ? value.substring(0, 4) + '...' : value;
    },
    rotate: 45 // 旋转标签
  }
}

问题2：数据显示不完整

解决：

// 确保radius足够大
polar: {
  radius: '70%' // 至少60%以上
}

// 或者调整center
polar: {
  center: ['50%', '55%'] // 向下偏移，为标题留空间
}

---

🎯 最佳实践

1. 选择合适的图表类型

// ✅ 适合极坐标：
// - 周期性数据（一周、一天）
// - 占比分析（玫瑰图）
// - 雷达评估（多维度）
// - 循环数据（方向、角度）

// ❌ 不适合极坐标：
// - 线性趋势
// - 时间序列
// - 大量类别（>12个）

2. 颜色编码

itemStyle: {
  color: function(params) {
    // 根据数值着色
    const value = params.value;
    if (value >= 80) return '#91cc75'; // 优秀
    if (value >= 60) return '#fac858'; // 良好
    return '#ee6666'; // 待改进
  }
}

3. 响应式调整

const isMobile = window.innerWidth < 768;

polar: {
  radius: isMobile ? '50%' : '70%',
  center: ['50%', isMobile ? '60%' : '50%']
}

---

📊 性能指标

配置	渲染时间	建议
简单极坐标	10ms	无限制
带热力图	20ms	正常
多系列堆叠	30ms	系列≤5

---

🔗 相关链接

• 雷达图高级.md)
• 热力图.md)
• angleAxis-radiusAxis

---

💎 总结

polar核心价值：

• ✅ 圆形布局美观独特
• ✅ 适合周期性数据
• ✅ 玫瑰图展示占比
• ✅ 雷达图多维评估

适用场景：

• 周/日活动分布
• 能力评估雷达图
• 销售占比玫瑰图
• 方向性数据分析

掌握极坐标系，让数据展示更丰富！🌀

极坐标系统

{
  "title": {
    "text": "极坐标散点图",
    "left": "center"
  },
  "tooltip": {
    "trigger": "axis"
  },
  "angleAxis": {
    "max": 360,
    "startAngle": 0
  },
  "radiusAxis": {
    "type": "value",
    "min": 0
  },
  "polar": {},
  "series": [
    {
      "type": "scatter",
      "data": [
        [
          30,
          5
        ],
        [
          60,
          8
        ],
        [
          90,
          12
        ],
        [
          120,
          15
        ],
        [
          150,
          10
        ],
        [
          180,
          7
        ],
        [
          210,
          9
        ],
        [
          240,
          11
        ]
      ],
      "coordinateSystem": "polar",
      "symbolSize": 15,
      "itemStyle": {
        "color": "#5470c6"
      }
    }
  ]
}