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> |