<template>
    <div style="width:100%;height:100%;" :id="id">
    </div>
</template>
<script>
    import echarts from "echarts"
    export default {
        name: "doughnut",
        props: {
            id: {
                type: String,
                default: function createRandomId() {
                    return (Math.random() * 10000000).toString(16).substr(0, 4) + '-' + (new Date()).getTime() + '-' + Math.random().toString().substr(2, 5);
                }
            },
            renderData: {
                type: Array,
                default: function() {
                    return []
                }
            }
        },
        data() {
            return {
                myCharts: null
            }
        },
        created() {},
        mounted() {
            this.drawDoughnut()
        },
        methods: {
            drawDoughnut() {
                console.log(this.renderData, "renderData")
                let options = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b}: ({d}%)"
                    },
                    legend: {
                        orient: 'horizontal',
                        x: 'center', // 'center'
                        data: this.renderData.map(item => {
                            return item.name
                        })
                    },
                    graphic: {
                        type: 'text',
                        left: 'center',
                        top: 'center',
                        style: {
                            text: '数据源\n1111',
                            textAlign: 'center',
                            fill: '#000',
                            width: 30,
                            height: 30
                        }
                    },
                    series: [{
                        name: '',
                        type: 'pie',
                        radius: ['40%', '60%'],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    textStyle: {
                                        color: '#3c4858',
                                        fontSize: "9"
                                    },
                                    formatter: function(val) { //让series 中的文字进行换行
                                    console.log(val,val)
                                        return val.name.split("-")[0];
                                    }
                                },
                                title: {
                                    text: 'aaaa'
                                },
                                labelLine: {
                                    show: false,
                                    lineStyle: {
                                        color: '#3c4858'
                                    }
                                }
                            },
                            emphasis: {
                                shadowBlur: 5,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                                textColor: '#000'
                            }
                        },
                        // data: [{
                        //         value: 20,
                        //         name: "1"
                        //     },
                        //     {
                        //         value: 20,
                        //         name: "2"
                        //     },
                        //     {
                        //         value: 15,
                        //         name: "3"
                        //     }
                        // ]
                        data: this.renderData
                    }],
                    color: ['#9DA2D6', '#FBACA1', '#FFE37F']
                }
                this.myCharts = echarts.init(document.getElementById(this.id))
                this.myCharts.setOption(options)
            },
        },
        watch: {
            renderData: {
                deep: true,
                handler: function() {
                    this.drawDoughnut()
                }
            }
        }
    }
</script>
<style>

</style>