Blame view

ant-design-vue-jeecg/src/components/chart/Bar.vue 995 Bytes
1
2
3
<template>
  <div :style="{ padding: '0 0 32px 32px' }">
    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
4
    <v-chart :forceFit="true" :height="height" :data="dataSource" :scale="scale" :padding="padding">
5
6
      <v-tooltip/>
      <v-axis/>
7
8
9
10
11
12
      <v-bar position="x*y"/>
    </v-chart>
  </div>
</template>

<script>
13
  import { triggerWindowResizeEvent } from '@/utils/util'
14
15

  export default {
16
    name: 'Bar',
17
    props: {
18
19
20
21
      dataSource: {
        type: Array,
        required: true
      },
22
23
24
25
      yaxisText: {
        type: String,
        default: 'y'
      },
26
27
28
      title: {
        type: String,
        default: ''
29
30
31
32
      },
      height: {
        type: Number,
        default: 254
33
34
      }
    },
35
36
37
    data() {
      return { padding: ['auto', 'auto', '40', '50'] }
    },
38
39
40
41
42
43
44
45
    computed: {
      scale() {
        return [{
          dataKey: 'y',
          alias: this.yaxisText
        }]
      }
    },
46
47
    mounted() {
      triggerWindowResizeEvent()
48
49
50
    }
  }
</script>