<template>
  <div class="my-echart" id="echarts"></div>
</template>

<script>
    export default {
      name: "echarts_left_top",
      props: {
        persent: 0
      },
      mounted() {
        this.updateEcharts();
      },
      methods: {
        updateEcharts(persent) {
          var myEchart = this.$echarts.init(document.getElementById('echarts'));
          var option = {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              show: false,
            },
            top: '50%',
            color: ['#CF7FFF', '#575B86'],
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: ['65%', '80%'],
                avoidLabelOverlap: false,
                label: {
                  show: false,
                  position: 'center',
                },
                emphasis: {
                  label: {
                    show: true,
                    formatter: '{d}%',
                    color: '#CED1FC',
                    fontWeight: 500,
                    fontSize: 24,
                  }
                },
                labelLine: {
                  show: true
                },
                data: [
                  { value: 300, name: '已报到', itemStyle: {borderColor: '#CF7FFF', borderWidth: 10 ,borderCap: 'round'} },
                  { value: 735, name: '未报到' },
                ]
              }
            ]
          };
          myEchart.setOption(option)
        }
      },
    }
</script>

<style scoped>
  .my-echart {
    width: 100%;
    height: 100%;
    /*border: 1px solid red;*/
  }
</style>
