Blame view

ant-design-vue-jeecg/src/components/chart/Bar.vue 919 Bytes
肖超群 authored
1
2
3
4
5
6
7
8
9
10
11
12
<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>
肖超群 authored
13
import {triggerWindowResizeEvent} from '@/utils/util'
肖超群 authored
14
肖超群 authored
15
16
17
18
19
20
export default {
  name: 'Bar',
  props: {
    dataSource: {
      type: Array,
      required: true
肖超群 authored
21
    },
肖超群 authored
22
23
24
    yaxisText: {
      type: String,
      default: 'y'
肖超群 authored
25
    },
肖超群 authored
26
27
28
    title: {
      type: String,
      default: ''
肖超群 authored
29
    },
肖超群 authored
30
31
32
    height: {
      type: Number,
      default: 254
肖超群 authored
33
    }
肖超群 authored
34
35
36
37
38
39
40
41
42
43
44
45
46
47
  },
  data() {
    return {padding: ['auto', 'auto', '40', '50']}
  },
  computed: {
    scale() {
      return [{
        dataKey: 'y',
        alias: this.yaxisText
      }]
    }
  },
  mounted() {
    triggerWindowResizeEvent()
肖超群 authored
48
  }
肖超群 authored
49
}
肖超群 authored
50
</script>