CostumingPlatform/ant-design-vue-shop/src/components/chart/Radar.vue

<template>
  <v-chart :forceFit="true" :height="height" :data="data" :padding="[20, 20, 95, 20]" :scale="scale">
    <v-tooltip></v-tooltip>
    <v-axis :dataKey="axis1Opts.dataKey" :line="axis1Opts.line" :tickLine="axis1Opts.tickLine" :grid="axis1Opts.grid"/>
    <v-axis :dataKey="axis2Opts.dataKey" :line="axis2Opts.line" :tickLine="axis2Opts.tickLine" :grid="axis2Opts.grid"/>
    <v-legend dataKey="user" marker="circle" :offset="30"/>
    <v-coord type="polar" radius="0.8"/>
    <v-line position="item*score" color="user" :size="2"/>
    <v-point position="item*score" color="user" :size="4" shape="circle"/>
  </v-chart>
</template>

<script>
  const axis1Opts = {
    dataKey: 'item',
    line: null,
    tickLine: null,
    grid: {
      lineStyle: {
        lineDash: null
      },
      hideFirstLine: false
    }
  }
  const axis2Opts = {
    dataKey: 'score',
    line: null,
    tickLine: null,
    grid: {
      type: 'polygon',
      lineStyle: {
        lineDash: null
      }
    }
  }

  const scale = [
    {
      dataKey: 'score',
      min: 0,
      max: 100
    }, {
      dataKey: 'user',
      alias: '类型'
    }
  ]

  const sourceData = [
    { item: '示例一', score: 40 },
    { item: '示例二', score: 20 },
    { item: '示例三', score: 67 },
    { item: '示例四', score: 43 },
    { item: '示例五', score: 90 }
  ]

  export default {
    name: 'Radar',
    props: {
      height: {
        type: Number,
        default: 254
      },
      dataSource: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        axis1Opts,
        axis2Opts,
        scale,
        data: sourceData
      }
    },
    watch: {
      dataSource(newVal) {
        if (newVal.length === 0) {
          this.data = sourceData
        } else {
          this.data = newVal
        }
      }
    }
  }
</script>

<style scoped>

</style>