<template>
  <div class="height pt-5 pb-8">
    <div class="item">
      <pie-chart :data-item="dataItem" title="存款余额" />
    </div>
    <div class="item">
      <pie-chart :data-item="dataItem" title="贷款余额" />
    </div>
    <div class="item">
      <pie-chart :data-item="dataItem" title="对公客户数" />
    </div>
    <div class="item">
      <pie-chart :data-item="dataItem" title="个人客户数" />
    </div>
  </div>
</template>

<script>
import PieChart from '../chart/pieChart'
export default {
  name: 'pie-package',
  components: { PieChart },
  data () {
    return {
      dataItem: [
        { value: 1048, name: '廉江' },
        { value: 735, name: '吴川' },
        { value: 580, name: '徐闻' },
        { value: 484, name: '赤坎' },
        { value: 300, name: '霞山' }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>

.height {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列等比分布 */
  grid-template-rows: 1fr 1fr; /* 两行等比分布 */
  grid-gap: 15px; /* 单元格之间的间隔 */
  // padding: 30px;
}
</style>
