<template>
  <div class="container normal-panel">
    <p class="normal-margin normal-title">学习数据</p>
    <div class="pie-panel"> 
      <div id="containerStudy"></div>
    </div>
  </div>
</template>

<style scoped>
.pie-panel{
  height:calc(100vh - 48px);display:flex;align-items:center
}
.pie-panel #containerStudy{
  margin: 0 auto;width:100%
}
</style>

<script>
// import * as G2 from '@antv/g2';  
import { Pie } from '@antv/g2plot';
export default {
  props:['pieStudyData'],
  data () {
    return {
      piePlot () {}
    }
  },
  methods:{
    renderBar () {
      this.piePlot = new Pie('containerStudy', {
        appendPadding: 10,
        data:[],
        angleField: 'num',
        colorField: 'type',
        color: ['#FBB33B', '#F77655'],
        legend: {
          position: 'leftTop'
        },
        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>