|
|
1
|
<template>
|
|
|
2
|
<v-chart :forceFit="true" :height="height" :data="data" :padding="[20, 20, 95, 20]" :scale="scale">
|
|
|
3
|
<v-tooltip></v-tooltip>
|
|
|
4
5
6
7
8
9
|
<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"/>
|
|
|
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
|
</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,
|
|
|
41
|
max: 100
|
|
|
42
43
44
45
46
47
|
}, {
dataKey: 'user',
alias: '类型'
}
]
|
|
|
48
49
50
51
52
53
54
55
|
const sourceData = [
{ item: '示例一', score: 40 },
{ item: '示例二', score: 20 },
{ item: '示例三', score: 67 },
{ item: '示例四', score: 43 },
{ item: '示例五', score: 90 }
]
|
|
|
56
57
58
|
export default {
name: 'Radar',
props: {
|
|
|
59
60
61
62
63
|
height: {
type: Number,
default: 254
},
dataSource: {
|
|
|
64
|
type: Array,
|
|
|
65
|
default: () => []
|
|
|
66
67
|
}
},
|
|
|
68
|
data() {
|
|
|
69
70
71
|
return {
axis1Opts,
axis2Opts,
|
|
|
72
73
74
75
76
77
78
79
80
81
82
|
scale,
data: sourceData
}
},
watch: {
dataSource(newVal) {
if (newVal.length === 0) {
this.data = sourceData
} else {
this.data = newVal
}
|
|
|
83
84
85
86
87
88
89
90
|
}
}
}
</script>
<style scoped>
</style>
|
