雷达图(Radar Chart)实现

雷达图基础概念

雷达图又称蜘蛛网图，是一种以从同一点开始的轴上显示的三个或更多个定量变量的二维图表形式。它将多个维度的数据映射到坐标轴上，这些轴从中心点向外辐射，并通过折线连接同一系列的值。雷达图特别适合用于展示多维度数据的对比关系，比如球员能力分析、产品特性比较等场景。

ECharts中的雷达图由以下几个核心部分组成：

• 中心点：所有坐标轴的起点
• 坐标轴：从中心向外辐射的轴线
• 指示器：定义各维度的名称和最大最小值
• 数据系列：连接各维度值的多边形区域

ECharts雷达图配置

在ECharts中创建雷达图需要配置两个主要组件：radar(雷达图坐标系)和series(数据系列)。以下是一个基础配置示例：

option = {
  radar: {
    indicator: [
      { name: '销售', max: 6500 },
      { name: '管理', max: 16000 },
      { name: '技术', max: 30000 },
      { name: '客服', max: 38000 },
      { name: '研发', max: 52000 },
      { name: '市场', max: 25000 }
    ]
  },
  series: [{
    type: 'radar',
    data: [
      {
        value: [4200, 3000, 20000, 35000, 50000, 18000],
        name: '预算分配'
      },
      {
        value: [5000, 14000, 28000, 26000, 42000, 21000],
        name: '实际开销'
      }
    ]
  }]
};

雷达图样式定制

ECharts提供了丰富的样式配置选项来自定义雷达图外观：

坐标轴样式

radar: {
  axisLine: {
    lineStyle: {
      color: '#999',
      type: 'dashed'
    }
  },
  splitLine: {
    lineStyle: {
      color: ['#eee', '#ddd', '#ccc', '#bbb', '#aaa']
    }
  },
  splitArea: {
    show: true,
    areaStyle: {
      color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
    }
  }
}

数据区域样式

series: [{
  type: 'radar',
  areaStyle: {
    color: 'rgba(255, 0, 0, 0.6)'
  },
  lineStyle: {
    width: 2,
    type: 'solid'
  },
  itemStyle: {
    color: '#f00'
  }
}]

多雷达图实现

ECharts支持在同一个图表中展示多个雷达坐标系，适合比较不同量级的数据：

option = {
  radar: [
    {
      center: ['25%', '50%'],
      radius: '40%',
      indicator: [
        { name: '进攻', max: 100 },
        { name: '防守', max: 100 },
        { name: '速度', max: 100 }
      ]
    },
    {
      center: ['75%', '50%'],
      radius: '40%',
      indicator: [
        { name: '力量', max: 500 },
        { name: '耐力', max: 500 },
        { name: '敏捷', max: 500 }
      ]
    }
  ],
  series: [
    {
      type: 'radar',
      radarIndex: 0,
      data: [{ value: [80, 90, 70], name: '球员A' }]
    },
    {
      type: 'radar',
      radarIndex: 1,
      data: [{ value: [300, 400, 350], name: '球员A' }]
    }
  ]
};

动态雷达图实现

结合ECharts的动画API，可以创建动态更新的雷达图：

let dataIndex = 0;
const data = [
  [60, 50, 70, 40, 50, 30],
  [80, 70, 60, 50, 40, 60],
  [70, 80, 90, 60, 50, 40]
];

setInterval(() => {
  myChart.setOption({
    series: [{
      data: [{
        value: data[dataIndex]
      }]
    }]
  });
  dataIndex = (dataIndex + 1) % data.length;
}, 2000);

雷达图交互功能

ECharts雷达图支持丰富的交互功能：

提示框定制

tooltip: {
  trigger: 'item',
  formatter: function(params) {
    return `${params.seriesName}<br/>` +
      params.data.value.map((v, i) => {
        return `${option.radar.indicator[i].name}: ${v}`;
      }).join('<br/>');
  }
}

区域高亮

series: [{
  emphasis: {
    lineStyle: {
      width: 4
    },
    areaStyle: {
      color: 'rgba(255, 0, 0, 0.8)'
    }
  }
}]

雷达图与其它图表组合

雷达图可以与其他图表类型组合使用，创建更复杂的数据可视化：

option = {
  grid: [
    { left: '55%', top: '10%', width: '40%', height: '40%' },
    { left: '55%', top: '60%', width: '40%', height: '40%' }
  ],
  radar: {
    center: ['25%', '50%'],
    indicator: [
      { name: '指标1', max: 100 },
      { name: '指标2', max: 100 },
      { name: '指标3', max: 100 }
    ]
  },
  series: [
    {
      type: 'radar',
      data: [{ value: [60, 70, 80] }]
    },
    {
      type: 'bar',
      gridIndex: 0,
      data: [60, 70, 80]
    },
    {
      type: 'pie',
      gridIndex: 1,
      data: [
        { value: 60, name: '指标1' },
        { value: 70, name: '指标2' },
        { value: 80, name: '指标3' }
      ]
    }
  ]
};

雷达图性能优化

当雷达图数据量较大时，可以采取以下优化措施：

1. 关闭动画效果：

series: [{
  animation: false
}]

2. 减少分割区域：

radar: {
  splitNumber: 3
}

3. 简化数据点显示：

series: [{
  symbolSize: 4
}]

雷达图常见问题解决

坐标轴标签重叠

调整标签位置和旋转角度：

radar: {
  axisName: {
    offset: 10,
    rotate: 30
  }
}

数据区域不闭合

确保数据数组中值的数量与指示器数量一致：

// 错误示例 - 数据点不足
data: [{ value: [60, 70] }]  // 只有2个值，但指示器有3个

// 正确示例
data: [{ value: [60, 70, 80] }]

多边形显示异常

检查数据值是否超出指示器定义的范围：

// 错误示例 - 值超出max定义
indicator: [{ name: '指标', max: 100 }],
data: [{ value: [120] }]  // 120 > 100

// 正确示例
indicator: [{ name: '指标', max: 150 }],
data: [{ value: [120] }]

雷达图高级应用

自定义形状雷达图

通过极坐标转换实现非正多边形雷达图：

function createStarIndicator(count, innerRatio) {
  const indicators = [];
  for (let i = 0; i < count; i++) {
    const angle = (Math.PI * 2 * i) / count;
    indicators.push({
      name: `指标${i+1}`,
      // 交替使用内外半径
      radius: i % 2 ? '60%' : '30%',
      angle: (angle * 180 / Math.PI) % 360,
      max: 100
    });
  }
  return indicators;
}

option = {
  radar: {
    shape: 'circle',
    indicator: createStarIndicator(5, 0.5)
  },
  series: [{
    type: 'radar',
    data: [{ value: [80, 60, 90, 70, 85] }]
  }]
};

雷达图与地图结合

将雷达图叠加在地图上展示区域数据特征：

// 需要先注册地图
$.get('map/json/china.json', function(chinaJson) {
  echarts.registerMap('china', chinaJson);
  
  const option = {
    geo: {
      map: 'china',
      roam: true
    },
    radar: {
      center: ['50%', '50%'],
      radius: '30%',
      indicator: [
        { name: '经济', max: 100 },
        { name: '人口', max: 100 },
        { name: '面积', max: 100 }
      ]
    },
    series: [
      {
        type: 'map',
        geoIndex: 0,
        data: [{ name: '广东', value: 50 }]
      },
      {
        type: 'radar',
        data: [{ value: [80, 60, 40], name: '广东省数据' }]
      }
    ]
  };
  
  myChart.setOption(option);
});