| 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> | |
