// 各模块文件存储占比
<template>
  <div>
    <p class="title">各模块文件存储占比</p>
    <div id="container_modulestype"></div>
  </div>
</template>

<script>
import { Pie } from '@antv/g2plot';

export default {
  data () {
    return {
      chartPie:null
    }
  },
  methods:{
    renderPie() {
      this.chartPie = new Pie('container_modulestype', {
        appendPadding: 10,
        data:[],
        angleField: 'count',
        colorField: 'type',
        radius: 1,
        innerRadius: .75,
        content:'',
        tooltip:{
        },
        legend: {
          position: 'left'
        },
        label: {
          type: 'inner',
          offset: '-50%',
          autoRotate: false,
          style: { textAlign: 'center' },
          formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
        },
        statistic: {
          title: {
            formatter: () => '文件总存储量',
            offsetY: -8,
          },
          content: {
            offsetY: -4,
          },
        },
      });
      this.chartPie.render();
      this.getProportionOfFileModel()
    },
    async getProportionOfFileModel () {
      let param = {
        "classname": "webmanage.dataanalysis.MediaCenter",
        "method": "getProportionOfFileModel",
        "content": {}
      }
      const res = await this.$api.requested(param)
      this.chartPie.changeData(res.data)
    }
  },
  mounted () {
    this.renderPie()
  }
}

</script>
<style>
</style>
<style scoped>
.title{
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  text-indent: 7px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20px;
  border-left: .3rem solid #3874F6;
}

</style>