雷达图

概述

• 雷达图是通过ECharts的雷达图坐标系组件实现的。该组件等同 ECharts 2 中的 polar 组件。因为 3 中的 polar 被重构为标准的极坐标组件，为避免混淆，雷达图使用 radar 组件作为其坐标系。
• 雷达图坐标系与极坐标系不同的是它的每一个轴（indicator 指示器）都是一个单独的维度，可以通过 name、axisLine、axisTick、axisLabel、splitLine、 splitArea 几个配置项配置指示器坐标轴线的样式。
• 雷达图图例

主要属性

radar. zleve

• 所有图形的 zlevel 值。
• zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。
• zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

radar. z = 2

• 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
• z相比zlevel优先级更低，而且不会创建新的 Canvas。

radar. center = [‘50%’, ‘50%’]

• 雷达图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
• 支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。
• 使用示例：

// 设置成绝对的像素值
center: [400, 300]
// 设置成相对的百分比
center: ['50%', '50%']

radar. radius = 75%

• 雷达图的半径。可以为如下类型：
  • number：直接指定外半径值。
  • string：例如，’20%’，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。
  • Array.：数组的第一项是内半径，第二项是外半径。每一项遵从上述 number string 的描述。

radar. startAngle = 90

• 坐标系起始角度，也就是第一个指示器轴的角度。

radar. nameObject

• 雷达图每个指示器名称的配置项。

radar.name. show = trueboolean

• 是否显示指示器名称。

radar.name. formatterstringFunction

• 指示器名称显示的格式器。支持字符串和回调函数，如下示例：

// 使用字符串模板，模板变量为指示器名称 {value}
formatter: '【{value}】'
// 使用回调函数，第一个参数是指示器名称，第二个参数是指示器配置项
formatter: function (value, indicator) {
    return '【' + value + '】';
}

radar. textStyle

• 包含许多子属性，用于雷达图的样式设置

radar. axisLineObject

• 坐标轴轴线相关设置。

radar. axisTickObject

• 坐标轴刻度相关设置。

radar. axisLabelObject

• 坐标轴刻度标签的相关设置。

radar. indicatorArray

• 雷达图的指示器，用来指定雷达图中的多个变量（维度），如下示例。

indicator: [
   { name: '销售（sales）', max: 6500},
   { name: '管理（Administration）', max: 16000, color: 'red'}, // 标签设置为红色
   { name: '信息技术（Information Techology）', max: 30000},
   { name: '客服（Customer Support）', max: 38000},
   { name: '研发（Development）', max: 52000},
   { name: '市场（Marketing）', max: 25000}
]

radar.indicator. namestring

• 指示器名称。

radar.indicator. max

• 指示器的最大值，可选，建议设置

radar.indicator. min

• 指示器的最小值，可选，默认为 0。

radar.indicator. color

• 标签特定的颜色。