<template>
  <ve-histogram
    :data="data"
    :settings="chartSettings"
    :extend="extend"/>
</template>

<script>
export default {
  name: 'BarChart',
  props: {
    data: {
      type: Object,
      default() {
        return {
          columns: ['inoutType', 'num'],
          rows: []
        }
      }
    }
  },
  data() {
    return {
      extend: {
        series: {
          label: { show: true, position: 'top' },
          itemStyle: {
            normal: {
              barBorderRadius: [3, 3, 0, 0]
            }
          },
          barMaxWidth: 35
        }
      },
      chartSettings: {
        labelMap: {
          'inoutType': '进出类型',
          'num': '进出数量'
        },
        itemStyle: {
          'barCategoryGap': 5
        },
        demension: 'inoutType',
        barWidth: 15
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .chart-title{
    margin: auto;
    text-align: center;
    margin-top: 15px;
    font-size:20px;
    font-weight:600
  }
  .select-right{
    /*margin-right: 25px;*/
    margin-top: 15px;
    /*width: 200px*/
  }
</style>