vue版本上线

jshERP-web/src/components/chart/Radar.vue

@@ -0,0 +1,90 @@
+<template>
+  <v-chart :forceFit="true" :height="height" :data="data" :padding="[20, 20, 95, 20]" :scale="scale">
+    <v-tooltip></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 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,
+      max: 100
+    }, {
+      dataKey: 'user',
+      alias: '类型'
+    }
+  ]
+
+  const sourceData = [
+    { item: '示例一', score: 40 },
+    { item: '示例二', score: 20 },
+    { item: '示例三', score: 67 },
+    { item: '示例四', score: 43 },
+    { item: '示例五', score: 90 }
+  ]
+
+  export default {
+    name: 'Radar',
+    props: {
+      height: {
+        type: Number,
+        default: 254
+      },
+      dataSource: {
+        type: Array,
+        default: () => []
+      }
+    },
+    data() {
+      return {
+        axis1Opts,
+        axis2Opts,
+        scale,
+        data: sourceData
+      }
+    },
+    watch: {
+      dataSource(newVal) {
+        if (newVal.length === 0) {
+          this.data = sourceData
+        } else {
+          this.data = newVal
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>