<template>
<div ref="chart" class="xp-chart-pie"></div>
</template>

<script>
/**
 * @file 饼图
 * @author zhangping15
 * @date 2018-05-02
 */

import * as echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/pie';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/title';

export default {
    name: 'chart-pie',
    data() {
        return {
            datasource: null,
            chart: {
                title: {
                    text: '来源二',
                    x: 'center',
                    y:'5%',
                    textStyle: {
                        color: '#333333',
                        fontSize: '20',
                        fontWeight: '500'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} :<br/> {c} ({d}%)',
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 100
                    }
                },
                color: ['#60ACFC', '#4EBECD', '#63D5B2', '#A1E497', '#DCEF7A'],
                legend: {
                    data: [],
                    show: true,
                    top: 'center',
                    right: '10%',
                    orient: 'vertical',
                    icon: 'rect',
                    itemWidth: 15,
                    itemHeight: 10,
                    itemGap: 15,
                    textStyle: {
                        color: '#333',
                        padding: [0, 0, 0, 5]
                    }
                },
                series: [
                    {
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '50%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 5,
                                shadowOffsetY: 5,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        labelLine: {
                            normal: {
                                formatter: '{d} %'
                            }
                        },
                        data: []
                    }
                ]
            }
        };
    },
    mounted() {
        this.getData();
    },
    watch: {
        datasource: {
            deep: true,
            handler() {
                this.initChart();
            }
        }
    },
    methods: {
        getData() {
            this.$http.get('./chart/getpie1', {
                params: {}
            }).then(res => {
                this.datasource = res.data;
            });
        },
        initChart() {
            if (!this.datasource) {
                return;
            }

            this.chart.legend.data = this.datasource.series.map(item => item.name);
            this.chart.series[0].data = this.datasource.series;

            echarts.init(this.$refs.chart).setOption(this.chart);
        }
    }
};
</script>

<style lang="less" src="./index.less">

</style>
