Tui Plus Vapor

Appearance

雷达图演示 ​

雷达图演示https://yundie.xyz/x-charts-demo/index.html?type=radar

参考配置 ​

基础雷达图 ​

html
<template>
  <view class="container">
    <t-xcharts
      ref="chart"
      :option="chartOption"
    ></t-xcharts>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const chartOption = ref({
  type: 'radar',
  animation: true,
  dataLabel: true,
  categories: ['速度', '力量', '耐力', '技巧', '智力', '敏捷'],
  series: [{
    name: '能力值',
    data: [80, 70, 85, 90, 75, 80],
    color: '#2979ff'
  }]
});
</script>

多系列雷达图 ​

html
<template>
  <view class="container">
    <t-xcharts
      ref="chart"
      :option="chartOption"
    ></t-xcharts>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const chartOption = ref({
  type: 'radar',
  animation: true,
  dataLabel: true,
  categories: ['速度', '力量', '耐力', '技巧', '智力', '敏捷'],
  series: [
    {
      name: '角色A',
      data: [80, 70, 85, 90, 75, 80],
      color: '#2979ff'
    },
    {
      name: '角色B',
      data: [70, 85, 75, 80, 90, 70],
      color: '#19be6b'
    }
  ]
});
</script>

配置说明 ​

type ​

图表类型，设置为 'radar' 表示雷达图。

categories ​

雷达图的维度标签数组。

series ​

数据系列配置：

  • name: 系列名称
  • data: 数据数组，每个值对应一个维度
  • color: 系列颜色

雷达图用于展示多个维度的数据对比。