<!--
 * @Description: 场馆、会议室预约情况
 * @Author: 王晓颖
 * @Date:2020-11-19 16:56:35
 -->
<template>
  <div style="width: 100%;height:100%;padding:0.1rem">
    <group-horizontal-bar-chart
      :id="options.id"
      :unit="options.unit"
      :height="options.height"
      :xAxisData="options.xAxisData"
      :seriesData="options.seriesData"
    />
  </div>
</template>

<script>
import ColorfulBarChart from '@/components/barChart/colorfulBarChart'
import GroupHorizontalBarChart from '@/components/barChart/groupHorizontalBarChart'
export default {
  name: 'bookingBar',
  components: {GroupHorizontalBarChart, ColorfulBarChart},
  data () {
    return {
      options: {
        id: 'booking_bar',
        height: '100%',
        width: '100%',
        unit: '米',
        xAxisData: ['图书馆', '报告厅', '运动场', '会议室'],
        legend: ['总数量', '已预约'],
        seriesData: [
          {name: '已预约', data: [0, 0, 0, 0], color: '#ff9e00', zlevel: 5},
          {name: '总数量', data: [0, 0, 0, 0], color: '#0468f1', zlevel: 0}
        ]
      }
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
const mockData = this.$globalJsons.globalSocialLive

      this.options.xAxisData = mockData.right.eCard.bar.xAxisData
      this.options.legend = mockData.right.eCard.bar.legend
      this.options.seriesData = mockData.right.eCard.bar.seriesData
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>