Radar.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <template>
  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. <script>
  13. const axis1Opts = {
  14. dataKey: 'item',
  15. line: null,
  16. tickLine: null,
  17. grid: {
  18. lineStyle: {
  19. lineDash: null
  20. },
  21. hideFirstLine: false
  22. }
  23. }
  24. const axis2Opts = {
  25. dataKey: 'score',
  26. line: null,
  27. tickLine: null,
  28. grid: {
  29. type: 'polygon',
  30. lineStyle: {
  31. lineDash: null
  32. }
  33. }
  34. }
  35. const scale = [
  36. {
  37. dataKey: 'score',
  38. min: 0,
  39. max: 80
  40. }, {
  41. dataKey: 'user',
  42. alias: '类型'
  43. }
  44. ]
  45. export default {
  46. name: 'Radar',
  47. props: {
  48. data: {
  49. type: Array,
  50. default: null
  51. }
  52. },
  53. data () {
  54. return {
  55. axis1Opts,
  56. axis2Opts,
  57. scale
  58. }
  59. }
  60. }
  61. </script>
  62. <style scoped>
  63. </style>