inleft
2022-02-15 91dc6cdda0548ff7f6e473a81933fa206d912cef
commit | author | age
9bcb19 1 <template>
I 2   <v-chart :forceFit="true" height="400" :data="data" :padding="[20, 20, 95, 20]" :scale="scale">
3     <v-tooltip></v-tooltip>
4     <v-axis :dataKey="axis1Opts.dataKey" :line="axis1Opts.line" :tickLine="axis1Opts.tickLine" :grid="axis1Opts.grid" />
5     <v-axis :dataKey="axis2Opts.dataKey" :line="axis2Opts.line" :tickLine="axis2Opts.tickLine" :grid="axis2Opts.grid" />
6     <v-legend dataKey="user" marker="circle" :offset="30" />
7     <v-coord type="polar" radius="0.8" />
8     <v-line position="item*score" color="user" :size="2" />
9     <v-point position="item*score" color="user" :size="4" shape="circle" />
10   </v-chart>
11 </template>
12
13 <script>
14 const axis1Opts = {
15   dataKey: 'item',
16   line: null,
17   tickLine: null,
18   grid: {
19     lineStyle: {
20       lineDash: null
21     },
22     hideFirstLine: false
23   }
24 }
25 const axis2Opts = {
26   dataKey: 'score',
27   line: null,
28   tickLine: null,
29   grid: {
30     type: 'polygon',
31     lineStyle: {
32       lineDash: null
33     }
34   }
35 }
36
37 const scale = [
38   {
39     dataKey: 'score',
40     min: 0,
41     max: 80
42   }, {
43     dataKey: 'user',
44     alias: '类型'
45   }
46 ]
47
48 export default {
49   name: 'Radar',
50   props: {
51     data: {
52       type: Array,
53       default: null
54     }
55   },
56   data () {
57     return {
58       axis1Opts,
59       axis2Opts,
60       scale
61     }
62   }
63 }
64 </script>
65
66 <style scoped>
67
68 </style>