<template>
  <div class="facility_storage_capacity">
    <barChart
      :echartData="echartData"
      yAxisName="调蓄量/m3"
      ref="barChartRef"
      :legend="{ show: false }"
      :grid="{
        left: '3%',
        right: '7%',
        top: '15%',
        bottom: '3%',
        containLabel: true
      }"
      v-if="echartData.xAxisData.length"
    />
  </div>
</template>

<script setup>
import { } from 'vue'
import barChart from '@/components/Echarts/barChart.vue'
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  }
})
const { data } = props
const echartData = {
  xAxisData: data.map(item => item.name),
  seriesData: [
    {
      type: 'bar',
      name: '调蓄量',
      barWidth: 16,
      itemStyle: {
        color: '#73c0de'
      },
      label: {
        show: true,
        color: 'black',
        position: 'top',
        distance: 0,
        fontWeight: 'bold'
      },
      data: data.map(item => item.value * 1)
    }
  ]
}
</script>

<style lang="scss" scoped>
.facility_storage_capacity {
  height: 300px;
}
</style>