jeecg-boot 1.0版本发布

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

@@ -0,0 +1,64 @@
+<template>
+  <div :style="{ padding: '0 0 32px 32px' }">
+    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
+    <v-chart
+      height="254"
+      :data="data"
+      :scale="scale"
+      :forceFit="true"
+      :padding="['auto', 'auto', '40', '50']">
+      <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",
+    props: {
+      title: {
+        type: String,
+        default: ''
+      }
+    },
+    data () {
+      return {
+        data: [],
+        scale,
+        tooltip
+      }
+    },
+    created () {
+      this.getMonthBar()
+    },
+    methods: {
+      getMonthBar() {
+        this.$http.get('/analysis/month-bar')
+          .then(res => {
+            this.data = res.result
+          })
+      }
+    }
+  }
+</script>