<template>
    <div id="pie-chart" style="height: 300px"></div>
</template>

<script>
 export default {
     data(){
        return {
            myChart: null,
            data: [
                {name: 'Succeed', value: '10532'},
                {name: 'Failed', value: '1529'},
                {name: 'Ready to send', value: '2107'},
            ]
        }
     },
     mounted() {
         this.getMyChart();
     },
     methods: {
         getMyChart() {
             if(!this.myChart){
                 this.myChart = this.$echarts.init(document.getElementById('pie-chart'));
             }
             let { data } = this;
             this.myChart.setOption({
                 title: {
                     left: 'center',
                     top: 'center',
                     text: [
                         '{a|74.34%}',
                         '{b|Success rate}'
                     ].join('\n'),
                     textStyle: {
                         rich: {
                            a: {
                                fontSize: 18,
                                color: '#3D3B3B',
                                fontWeight: 'bold',
                                lineHeight: 30
                            },
                             b: {
                                fontSize: 12,
                                 color: '#3D3B3B'
                             }
                         }
                     }
                 },
                 color: ['#30A706', '#E11508', '#FF8A00'],
                 legend: {
                     orient: 'vertical',
                     top: 'bottom',
                     left: 'right',
                     icon: 'circle',
                     itemWidth: 10,
                     itemHeight: 10,
                     itemGap: 10,
                     textStyle:{
                         color: '#000'
                     },
                 },
                 series: [
                     {
                         type: 'pie',
                         radius: ['30%', '75%'],
                         label: {
                             position: 'inside',
                             formatter:'{d}%',
                             textStyle : {
                                 fontSize : 12,
                                 color: '#fff'
                             },
                         },
                         labelLine: {
                             show: false
                         },
                         itemStyle:{
                             borderWidth: 3,
                             borderColor: '#fff',
                         },
                         data
                     }
                 ]
             })
         },
     }
 }
</script>
