<template>
  <div :style="{ padding: '0 0 32px 32px' }">
    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
    <v-chart :forceFit="true" :height="height" :data="data" >
      <v-tooltip />
      <v-axis />
      <v-legend />
      <v-bar position="x*y" color="x"/>
    </v-chart>
  </div>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
        default: ''
      },
      data: {
        type: Array,
        default: () => {
          return []
        }
      },
      scale: {
        type: Array,
        default: () => {
          return [{
            dataKey: 'x',
            min: 2
          }, {
            dataKey: 'y',
            title: '时间',
            min: 1,
            max: 22
          }]
        }
      },
      tooltip: {
        type: Array,
        default: () => {
          return [
            'x*y',
            (x, y) => ({
              name: x,
              value: y
            })
          ]
        }
      }
    },
    data() {
      return {
        height: 400,
      }
    }
  }
</script>