Skip to content

你正在查看 v1.0.1 文档。切换到最新版请访问:/

基础雷达

功能说明(What)

基础雷达图用于展示多维指标的整体形态,适合能力画像与综合评分。

应用场景(When)

  • 多维能力画像
  • 综合评分展示

快速上手(How - Quick)

ts
import { BaseRadar } from '@ymhc/harmonycharts';
import type { BaseRadarConfig } from '@ymhc/harmonycharts';

@Entry
struct Index {
  @Prop baseRadarConfig: BaseRadarConfig = {
    indicators: [
      { name: 'Speed', max: 100 },
      { name: 'Quality', max: 100 },
      { name: 'Reliability', max: 100 },
      { name: 'Flexibility', max: 100 },
      { name: 'Cost', max: 100 }
    ],
    data: [{ name: 'Plan', value: [70, 80, 65, 75, 60] }],
    tooltip: { show: true, trigger: 'item', confine: true },
    legend: { show: true }
  };

  build() {
    Column() {
      BaseRadar({ config: this.baseRadarConfig, chartHeight: 240 })
    }
  }
}

运行结果

radar basic

完整示例配置(整页可用)

ts
const option: HarmonyChartsOption = {
  radar: {
    indicator: [
      { name: 'Speed', max: 100 },
      { name: 'Quality', max: 100 },
      { name: 'Reliability', max: 100 },
      { name: 'Flexibility', max: 100 },
      { name: 'Cost', max: 100 }
    ],
    center: ['50%', '50%'],
    radius: '70%'
  },
  tooltip: { show: true, trigger: 'item', confine: true },
  legend: { show: true },
  series: [{ type: 'radar', name: 'Radar', data: [{ name: 'Plan', value: [70, 80, 65, 75, 60] }] }]
};

默认值(精确工程默认)

该页面默认值与 BaseRadar 一致,详见总览页「默认值(精确工程默认)」。

配置项说明(API)

参数说明类型默认值
indicator雷达维度RadarIndicator[]5 维默认
radius半径number | string | [number | string, number | string]'70%'

事件与交互(Events)

ts
chart.on('click', (params) => {
  // params.seriesType === 'radar'
});

高级用法(Advanced)

  • 多系列对比 + legend 联动

注意事项 / 设计说明(Notes)

  • 指标维度过多时需考虑文字拥挤。

HarmonyCharts 鸿蒙图表文档。