<template>
    <div id="myMidChart" ref="pieChart" :style="boxStyle"></div>
</template>
<script>
export default {
    props: {
        pieData: {},
        boxStyle: {}
    },
    data() {
        return {};
    },
    mounted() {
        this.$nextTick(function () {
            this.drawBar();
        });
    },
    methods: {
        drawBar() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = this.$echarts.init(this.$refs.pieChart);
            // 绘制图表
            myChart.setOption({
                legend: {
                    orient: 'vertical',
                    top: 'center',
                    left: 'right'
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        // name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['35%', '50%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: false,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: this.pieData
                    }
                ]
            });
            window.addEventListener('resize', () => {
                // 第六步，执行echarts自带的resize方法，即可做到让echarts图表自适应
                myChart.resize();
            });
        }
    },
    watch: {
        pieData(val, old) {
            this.drawBar();
        }
    },
    beforeDestroy() {
        /* 页面组件销毁的时候，别忘了移除绑定的监听resize事件，否则的话，多渲染几次
      容易导致内存泄漏和额外CPU或GPU占用哦*/
        window.removeEventListener('resize', () => {
            myChart.resize();
        });
    }
};
</script>
<style lang="less">
#myMidChart {
    width: 100%;
    height: 240px;
}
</style>