Blame view

ant-design-vue-jeecg/src/components/chart/StackBar.vue 1.18 KB
肖超群 authored
1
2
3
<template>
  <div>
    <v-chart :forceFit="true" :height="height" :data="data">
肖超群 authored
4
5
6
7
8
      <v-coord type="rect" direction="LB"/>
      <v-tooltip/>
      <v-legend/>
      <v-axis dataKey="State" :label="label"/>
      <v-stack-bar position="State*流程数量" color="流程状态"/>
肖超群 authored
9
10
11
12
13
14
    </v-chart>
  </div>

</template>

<script>
肖超群 authored
15
const DataSet = require('@antv/data-set');
肖超群 authored
16
肖超群 authored
17
18
19
20
21
22
23
24
25
26
27
28
export default {
  name: 'StackBar',
  props: {
    dataSource: {
      type: Array,
      required: true,
      default: () => [
        {'State': '请假', '流转中': 25, '已归档': 18},
        {'State': '出差', '流转中': 30, '已归档': 20},
        {'State': '加班', '流转中': 38, '已归档': 42},
        {'State': '用车', '流转中': 51, '已归档': 67}
      ]
肖超群 authored
29
    },
肖超群 authored
30
31
32
33
34
35
36
37
38
39
40
    height: {
      type: Number,
      default: 254
    }
  },
  data() {
    return {
      label: {offset: 12}
    }
  },
  computed: {
肖超群 authored
41
    data() {
肖超群 authored
42
43
44
45
46
47
48
49
50
      const dv = new DataSet.View().source(this.dataSource);
      dv.transform({
        type: 'fold',
        fields: ['流转中', '已归档'],
        key: '流程状态',
        value: '流程数量',
        retains: ['State'],
      });
      return dv.rows;
肖超群 authored
51
52
    }
  }
肖超群 authored
53
}
肖超群 authored
54
</script>