55 lines
1.2 KiB
Vue
55 lines
1.2 KiB
Vue
<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>
|