You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
1.3 KiB
54 lines
1.3 KiB
<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> |