凌云UI 使用手册
接入
组件
图表
页面
  • 总览
  • 组件 1.0.42
  • 图表 1.0.27
  • 页面包 1.0.3
GitHub
接入
组件
图表
页面
  • 总览
  • 组件 1.0.42
  • 图表 1.0.27
  • 页面包 1.0.3
GitHub
  • 图表

    • 图表
    • 柱状图
    • 堆积图
    • 条状图
    • 折线图
    • 曲线图
    • 区域图
    • 饼图
    • 圆环图
    • 玫瑰图
    • 漏斗图
    • 雷达图
    • 仪表盘
    • 圆弧进度
    • 山峰图
    • 混合图
    • 散点图
    • 气泡图
    • K 线图
    • 词云图
    • 地图
    • 时间轴折线
    • 时间轴区域

雷达图 · radar

雷达图。type="radar"。Demo 页:/pages/demo/charts/radar(多边形、圆形、刻度抽稀、渐变)。

数据

必须有 categories(各轴名称)。每条 series.data 与轴等长。

opts.extra.radar.max 小于数据峰值时,刻度按二者中的较大者均分,图形仍落在网格内。

常用 extra.radar

字段说明
gridTyperadar 多边形网格;circle 圆形网格
gridCount网格层数
gridEval径向线抽稀,默认 1(每条都画);2 隔一条画
axisLabel是否画出刻度数字
labelShow是否画出维度名称
opacity区域填充透明度
border是否描边区域
linearTypenone / custom。custom 且不传 customColor 时,圆心用引擎线性色(#0EE2F8),外缘用系列色
max数据区间最大值

顶点数值用 opts.dataLabel: true。

示例:多边形 / 圆形

<view class="chart-box">
  <lingyun-ui-charts
    type="radar"
    :chartData="chartData"
    :opts="chartOpts"
  />
</view>
const chartData = {
  categories: ['维度1', '维度2', '维度3', '维度4', '维度5', '维度6'],
  series: [
    { name: '成交量1', data: [90, 110, 165, 195, 187, 172] },
    { name: '成交量2', data: [190, 210, 105, 35, 27, 102] },
  ],
}

const chartOpts = {
  dataLabel: false,
  extra: {
    radar: {
      gridType: 'radar', // 圆形改为 circle
      gridCount: 3,
      opacity: 0.2,
      max: 200,
      border: true,
      labelShow: true,
    },
  },
}

示例:刻度标签 + 网格抽稀

const chartOpts = {
  dataPointShape: false,
  extra: {
    radar: {
      gridType: 'circle',
      gridCount: 3,
      opacity: 0.2,
      max: 200,
      axisLabel: true,
      gridEval: 2,
      border: true,
      labelShow: true,
    },
  },
}

示例:渐变色

单系列。linearType: "custom" 不传 customColor 时,圆心取引擎线性色 #0EE2F8,外缘为系列色。max: 240 让图形留在网格内侧。dataLabel 标出顶点数值。

const chartData = {
  categories: ['维度1', '维度2', '维度3', '维度4', '维度5', '维度6'],
  series: [{ name: '成交量1', data: [90, 110, 165, 195, 187, 172] }],
}

const chartOpts = {
  dataLabel: true,
  dataPointShape: false,
  extra: {
    radar: {
      gridType: 'circle',
      gridCount: 3,
      opacity: 1,
      max: 240,
      border: false,
      labelShow: true,
      linearType: 'custom',
    },
  },
}
.chart-box {
  width: 100%;
  height: 280px;
}

接法、属性、事件见 图表总览。

Edit this page
最近更新: 2026/10/16 18:25
Contributors: qiu
Prev
漏斗图
Next
仪表盘