1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
| <template>
| <v-chart :forceFit="true" height="400" :data="data" :padding="[20, 20, 95, 20]" :scale="scale">
| <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 DataSet = require('@antv/data-set')
|
| const sourceData = [
| {item: '引用', a: 70, b: 30, c: 40},
| {item: '口碑', a: 60, b: 70, c: 40},
| {item: '产量', a: 50, b: 60, c: 40},
| {item: '贡献', a: 40, b: 50, c: 40},
| {item: '热度', a: 60, b: 70, c: 40},
| {item: '引用', a: 70, b: 50, c: 40}
| ]
|
| const dv = new DataSet.View().source(sourceData)
| dv.transform({
| type: 'fold',
| fields: ['a', 'b', 'c'],
| key: 'user',
| value: 'score'
| })
|
| const scale = [{
| dataKey: 'score',
| min: 0,
| max: 80
| }]
|
| const data = dv.rows
|
| 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
| }
| }
| }
|
| export default {
| name: 'Radar',
| data () {
| return {
| sourceData,
| data,
| axis1Opts,
| axis2Opts,
| scale
| }
| }
| }
| </script>
|
| <style scoped>
|
| </style>
|
|
