<template>
    <div :id="id" style="height: 100%;width:100%;"></div>
</template>

<script>
export default {
    data () {
        return {}
    },
    props:{
        id:{
            type: String
        }
    },
    mounted(){
        this.drawLine();
    },
    methods:{
        drawLine(){
            let _this = this
            let rich = {
                b: {
                    color: "#94998a",
                    fontSize: 10,
                    align: 'left',
                    padding: [3, 0],
                },
                c: {
                    color: "#FAFAFA",
                    fontSize: 10,
                    fontWeight: 100,
                },
                d: {
                    color: "#FAFAFA",
                    fontSize: 15,
                    fontWeight: 100,
                }
            }
            let color = ['#FF6B6A', '#48DBFC', '#1CD0A1', '#FDC958'];
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById(this.id));
            myChart.setOption({
                tooltip: {
                    formatter: function(p){

                    }
                },
    series: [
        {
            // name:'访问来源',
            type:'pie',
            selectedMode: 'single',
            radius: [0, '46%'],
            center: ['50%', '50%'],
            itemStyle:{
                color: function(p){
                    return color[p.data.type]
                }
            },
            label: {
                normal: {
                    position: 'inner',
                    formatter: function(p){
                        let percent = Math.round(p.percent)
                        return '{title|' + p.name + '}\n{num|' + percent +'%}';
                    },
                    rich: { 
                        title:{
                            color: "#fafafa",
                            fontSize: 10,
                        },
                        num:{
                            color: "#fafafa",
                            fontSize: 10,
                        }
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:300, name: _this.$t('schoolMgmt .text17'), type: 0},
                {value:500, name: _this.$t('schoolMgmt .text18'), type: 1},
                {value:270, name: _this.$t('schoolMgmt .text19'), type: 2},
                {value:250, name: _this.$t('schoolMgmt .text20'), type: 3}
            ]
        },
        {
            color: ['#FF6B6A', '#48DBFC', '#1CD0A1', '#FDC958'],
            name:'访问来源',
            type:'pie',
            radius: ['55%', '69%'],
            center: ['50%', '50%'],
            itemStyle : {
                color:function(p){
                    return color[p.data.type]
    	        },
            },
            label: {
                normal: {
                    formatter: function(p){
                        let percent = Math.round(p.percent).toFixed(1)
                        return '{b|' + p.name + '}\n{d|' + percent +'% }{c|('+ p.value +')}';
                    },
                    rich: rich
                },
                emphasis: {
                    show: true,
                    textStyle: {
                    }
                }
            },
            data:[
                {value:200, name: _this.$t('schoolMgmt .text21'), type: 0},
                {value:100, name: _this.$t('schoolMgmt .text22'), type: 0},
                {value:100, name: _this.$t('schoolMgmt .text23'), type: 1},
                {value:140, name: _this.$t('schoolMgmt .text24'), type: 1},
                {value:70, name: _this.$t('schoolMgmt .text25'), type: 1},
                {value:190, name: _this.$t('schoolMgmt .text26'), type: 1},
                {value:190, name: _this.$t('schoolMgmt .text27'), type: 2},
                {value:80, name: _this.$t('schoolMgmt .text28'), type: 2},
                {value:125, name: _this.$t('schoolMgmt .text29'), type: 3},
                {value:125, name: _this.$t('schoolMgmt .text30'), type: 3}
            ]
        }
    ]
            });
        }
    }
}

</script>

<style>
</style>
