<template>
|
|
<div :style="{ padding: '0 0 32px 32px' }">
|
|
<h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
|
|
<v-chart :forceFit="true" :height="height" :data="dataSource" :scale="scale" :padding="padding">
|
|
<v-tooltip/>
|
|
<v-axis/>
|
|
<v-bar position="x*y"/>
|
|
</v-chart>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { triggerWindowResizeEvent } from '@/utils/util'
|
|
|
|
export default {
|
|
name: 'Bar',
|
|
props: {
|
|
dataSource: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
yaxisText: {
|
|
type: String,
|
|
default: 'y'
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
height: {
|
|
type: Number,
|
|
default: 400
|
|
},
|
|
|
|
},
|
|
data() {
|
|
return { padding: ['auto', 'auto', '40', '50'] }
|
|
},
|
|
computed: {
|
|
scale() {
|
|
return [{
|
|
dataKey: 'y',
|
|
alias: this.yaxisText
|
|
}]
|
|
}
|
|
},
|
|
mounted() {
|
|
triggerWindowResizeEvent()
|
|
}
|
|
}
|
|
</script>
|