jeecg-boot 1.1 稳定版本发布

ant-design-jeecg-vue/src/components/chart/TransferBar.vue

@@ -2,63 +2,65 @@
   <div :style="{ padding: '0 0 32px 32px' }">
     <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
     <v-chart
-      height="254"
+      :height="height"
       :data="data"
       :scale="scale"
       :forceFit="true"
       :padding="['auto', 'auto', '40', '50']">
-      <v-tooltip />
-      <v-axis />
+      <v-tooltip/>
+      <v-axis/>
       <v-bar position="x*y"/>
     </v-chart>
   </div>
 </template>
 
 <script>
-  const tooltip = [
-    'x*y',
-    (x, y) => ({
-      name: x,
-      value: y
-    })
-  ]
-  const scale = [{
-    dataKey: 'x',
-    title: '日期(天)',
-    alias: '日期(天)',
-    min: 2
-  }, {
-    dataKey: 'y',
-    title: '流量(Gb)',
-    alias: '流量(Gb)',
-    min: 1
-  }]
 
   export default {
-    name: "Bar",
+    name: 'Bar',
     props: {
       title: {
         type: String,
         default: ''
+      },
+      x: {
+        type: String,
+        default: 'x'
+      },
+      y: {
+        type: String,
+        default: 'y'
+      },
+      data: {
+        type: Array,
+        default: () => []
+      },
+      height: {
+        type: Number,
+        default: 254
       }
     },
-    data () {
-      return {
-        data: [],
-        scale,
-        tooltip
+    data() {
+      return {}
+    },
+    computed: {
+      scale() {
+        return [
+          { dataKey: 'x', title: this.x, alias: this.x },
+          { dataKey: 'y', title: this.y, alias: this.y }
+        ]
       }
     },
-    created () {
-      this.getMonthBar()
+    created() {
+      // this.getMonthBar()
     },
     methods: {
-      getMonthBar() {
-        this.$http.get('/analysis/month-bar')
-          .then(res => {
-            this.data = res.result
-          })
-      }
+      // getMonthBar() {
+      //   this.$http.get('/analysis/month-bar')
+      //     .then(res => {
+      //       this.data = res.result
+      //     })
+      // }
     }
   }
 </script>