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