init

src/components/chart/StackBar.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <v-chart :forceFit="true" :height="height" :data="data">
+      <v-coord type="rect" direction="LB" />
+      <v-tooltip />
+      <v-legend />
+      <v-axis dataKey="State" :label="label" />
+      <v-stack-bar position="State*流程数量"  color="流程状态" />
+    </v-chart>
+  </div>
+
+</template>
+
+<script>
+const DataSet = require('@antv/data-set')
+
+export default {
+  name: 'StackBar',
+  props: {
+    dataSource: {
+      type: Array,
+      required: true,
+      default: () => [
+        { State: '请假', 流转中: 25, 已归档: 18 },
+        { State: '出差', 流转中: 30, 已归档: 20 },
+        { State: '加班', 流转中: 38, 已归档: 42 },
+        { State: '用车', 流转中: 51, 已归档: 67 }
+      ]
+    },
+    height: {
+      type: Number,
+      default: 254
+    }
+  },
+  data () {
+    return {
+      label: { offset: 12 }
+    }
+  },
+  computed: {
+    data () {
+      const dv = new DataSet.View().source(this.dataSource)
+      dv.transform({
+        type: 'fold',
+        fields: ['流转中', '已归档'],
+        key: '流程状态',
+        value: '流程数量',
+        retains: ['State']
+      })
+      return dv.rows
+    }
+  }
+}
+</script>