Blame view

ant-design-vue-jeecg/src/components/chart/Radar.vue 1.71 KB
肖超群 authored
1
2
3
4
5
6
7
8
9
10
11
12
13
<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>
肖超群 authored
14
15
16
17
18
19
20
21
22
const axis1Opts = {
  dataKey: 'item',
  line: null,
  tickLine: null,
  grid: {
    lineStyle: {
      lineDash: null
    },
    hideFirstLine: false
肖超群 authored
23
  }
肖超群 authored
24
25
26
27
28
29
30
31
32
}
const axis2Opts = {
  dataKey: 'score',
  line: null,
  tickLine: null,
  grid: {
    type: 'polygon',
    lineStyle: {
      lineDash: null
肖超群 authored
33
34
    }
  }
肖超群 authored
35
}
肖超群 authored
36
肖超群 authored
37
38
39
40
41
42
43
44
45
46
const scale = [
  {
    dataKey: 'score',
    min: 0,
    max: 100
  }, {
    dataKey: 'user',
    alias: '类型'
  }
]
肖超群 authored
47
肖超群 authored
48
49
50
51
52
53
54
const sourceData = [
  {item: '示例一', score: 40},
  {item: '示例二', score: 20},
  {item: '示例三', score: 67},
  {item: '示例四', score: 43},
  {item: '示例五', score: 90}
]
肖超群 authored
55
肖超群 authored
56
57
58
59
60
61
export default {
  name: 'Radar',
  props: {
    height: {
      type: Number,
      default: 254
肖超群 authored
62
    },
肖超群 authored
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
    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
肖超群 authored
82
83
84
      }
    }
  }
肖超群 authored
85
}
肖超群 authored
86
87
88
89
90
</script>

<style scoped>

</style>