<template>
  <div class="normal-panel">
    <p class="normal-margin normal-title">下载数据</p>
    <div class="pie-panel">
      <div id="containerDownload"></div>
    </div>
  </div>
</template>

<style>
/**
 * 默认尺寸为 600px×400px，如果想让图表响应尺寸变化，可以像下面这样
 * 把尺寸设为百分比值（同时请记得为容器设置尺寸）。
 */
</style>
<style scoped>
.pie-panel{
  height:calc(100vh - 48px);display:flex;align-items:center
}
.pie-panel #containerDownload{
  margin: 0 auto;width:100%
}
</style>
<script>
// import * as G2 from '@antv/g2';  
import { Pie } from '@antv/g2plot';
export default {
  props:['pieDownloadData'],
  data () {
    return {
      piePlot () {}
    }
  },
  methods:{
    renderBar () {
      this.piePlot = new Pie('containerDownload', {
        appendPadding: 10,
        data:[],
        angleField: 'num',
        colorField: 'type',
        color: ['#38C2F6', '#5D76E4'],
        legend: {
          position: 'leftTop'
        },
        width:100,
        radius: 0.6,
        label: {
          type: 'spider',
          labelHeight: 28,
          content: '{name}\n{percentage}',
          style: {
            fontSize: 14,
            textAlign: 'center',
          },
        },
        interactions: [{ type: 'element-active' }],
      });
      this.piePlot.render();
    }
  },
  mounted() {
    this.renderBar()
  }
}
</script>