<!--饼图组件模块-->
<template>
    <div class="poi-echart-pie">
        <div ref="pie" class="poi-echart-pie-wrap"></div>
    </div>
</template>

<script>
require("echarts/lib/chart/pie");
export default {
    name:'poi-echart-pie',
    props: {
        optionValue:"",
    },
    data(){
        return {
            Chart : require("echarts/lib/echarts"),
            // 默认option
            optionDefault:{
                title : {
                    text: '某站点用户访问来源',
                    subtext: '纯属虚构',
                    x:'center',
                    textStyle:{
                        color: '#fff',
                    },
                    subtextStyle:{
                        color: '#aaa',
                    }
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    legend: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                },
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {value:335, name:'直接访问'},
                            {value:310, name:'邮件营销'},
                            {value:234, name:'联盟广告'},
                            {value:135, name:'视频广告'},
                            {value:1548, name:'搜索引擎'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            },
            // 初始化的pie
            pieDom:{},
        }
    },
    methods:{
        dataInitEchart(titleData,legendData,seriesData){
            if(!seriesData)return;
            this.optionDefault.title.text = titleData.text;
            this.optionDefault.title.subtext = titleData.subtext;
            this.optionDefault.legend.legend = legendData;
            this.optionDefault.series[0].data = seriesData;
            this.pieDom.setOption && this.pieDom.setOption(this.optionDefault);
        },
        initEchartDefault(option){
            if(!option){
                option = this.optionValue;
            }
            let newOption = {...this.optionDefault,...option};
            this.pieDom.setOption && this.pieDom.setOption(newOption);
        },
    }, 
    mounted(){
        this.pieDom = this.Chart.init(this.$refs.pie);
        this.initEchartDefault();
    },
}
</script>
<style scoped>
.poi-echart-pie,
.poi-echart-pie-wrap{
    width: 100%;
    height: 100%;
}
</style>

