One Chart

图表

OneRadarChart

基础用法

雷达图把每个指标映射到等角度的辐条上，系列数值映射为半径，适合做多维能力对比。

Tooltip

雷达图为每个系列与指标的交点渲染热区，悬停显示指标名、系列名与数值，tooltip 默认开启，可传 tooltip: false 关闭或传入 { formatter } 自定义内容。

能力对比速度力量技巧耐力智力
查看代码
import { OneRadarChart } from '@geektech/one-chart';

const chart = new OneRadarChart({
  title: '能力对比',
  indicators: ['速度', '力量', '技巧', '耐力', '智力'],
  series: [
    { name: '战士', data: [80, 60, 90, 70, 85] },
    { name: '法师', data: [50, 80, 60, 95, 60] },
  ],
  showPoints: true,
});
chart.mount(document.querySelector('#app')!);

属性

OneRadarChart 属性
名称签名说明
indicatorsstring[]指标（坐标轴）名称
series{ name: string; data: number[] }[]系列数据，每个系列长度须与指标一致
levelsnumber网格环层数，默认 5
maxnumber数值域上限，默认按数据自动取整；超过上限的数值会被夹取
showPointsboolean在每个数据点绘制圆点，默认 false
fillboolean是否填充多边形，默认 true

几何与布局

网格环为同心正多边形，辐条从圆心指向各指标；数据点通过线性比例尺从 [0, max] 到半径。指标标签按所在辐条的角度自动选择锚点，避免越界。

能力对比速度力量技巧耐力智力
查看代码
import { OneRadarChart } from '@geektech/one-chart';

const chart = new OneRadarChart({
  title: '能力对比',
  indicators: ['速度', '力量', '技巧', '耐力', '智力'],
  series: [
    { name: '战士', data: [80, 60, 90, 70, 85] },
    { name: '法师', data: [50, 80, 60, 95, 60] },
  ],
  showPoints: true,
});
chart.mount(document.querySelector('#app')!);