<!-- -->
<template>
    <div style="height: 400px;width: 100%;">
        <Echart ref="Echart" :options="options" height='100%' width="100%" v-if="options"></Echart>
    </div>
</template>

<script>
    import Echart from '@/components/Echarts' //引入echatrs组件
    export default {
        name: 'CombinationChart',
        components: {
            Echart
        },
        props: {
            pieData: {
                type: Array,
                default: () => []///[{name:'name',value:0}]
            }
        },
        data() {
            return {
                options: null
            }
        },

        watch: {
            pieData: function () {
                this.getOptions()
            }
        },
        mounted() {
            setTimeout(() => {
                this.getOptions()
            }, 300);
        },
        methods: {
            getOptions() {
                var pie_color = ['#32D790', '#F4B561', '#7080DB', '#DF7A90',
                    '#3CC4EF', '#EF7F3C', '#EF3C81', '#0DBF8C', '#2F73C0', '#C55E18', '#C899FF', '#C6D727',
                    '#FF688F', '#87A0DC', '#00D9F7', '#A24EED'
                ];
                var legendList = [];
                // var pieData = [{
                //     name: 'A 农、林、牧、渔业',
                //     value: 290
                // }, {
                //     name: 'G 交通运输、仓储和邮政业',
                //     value: 450
                // }, {
                //     name: 'H 住宿和餐饮业',
                //     value: 120
                // }, {
                //     name: 'I 信息传输、软件和信息技术服务业',
                //     value: 288
                // },];
                let pieData = this.pieData || []
                for (var i = 0; i < pieData.length; i++) {
                    if (pieData[i]) {
                        legendList.push(pieData[i].name);
                    }
                }
                this.options = {
                    color: pie_color,
                    title: {
                        show: false,
                        text: '',
                        textStyle: {
                            color: '#333333',
                            fontSize: 16,
                        },
                    },
                    tooltip:{},
                    grid: {
                        show: false,
                        left: '2%',
                        right: '50%',
                        bottom: 0,
                        top: '2%',
                        containLabel: true
                    },
                    legend: {
                        bottom: '4%',
                        right: '10%',
                        orient: 'vertical',
                        width: 540,
                        height: 240,
                        padding: [14, 20],
                        backgroundColor: 'rgba(236,246,255,0.30)',
                        borderWidth: 1,
                        borderColor: '#E7F2FB',
                        borderRadius: 4,
                        icon: 'circle',
                        itemWidth: 8,
                        itemHeight: 8,
                        textStyle: {
                            color: '#333333',
                            fontSize: 12,
                        },
                        data: legendList,
                    },
                    xAxis: {
                        type: 'value',
                        gridIndex: 0,
                        name: '个',
                        nameTextStyle: {
                            color: '#9B9B9B',
                            fontSize: 14
                        },
                        axisLabel: {
                            color: '#727272',
                            fontSize: 14,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#333333',
                                opacity: 0.35,
                            }
                        },
                        axisTick: {
                            show: true,
                            inside: true,
                            lineStyle: {
                                color: '#333333',
                                opacity: 0.35,
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'category',
                        gridIndex: 0,
                        data: legendList,
                        inverse: true,
                        axisLabel: {
                            color: '#727272',
                            fontSize: 14,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#333333',
                                opacity: 0.35,
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    series: [{
                        name: '展览数量',
                        type: 'bar',
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                        data: pieData,
                        label: {
                            show: true,
                            position: 'right',
                            color: '#4A4A4A',
                            fontSize: 14,
                        },
                        barWidth: 20,
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x1: 0,
                                y1: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: '#FF9A91'
                                }, {
                                    offset: 1,
                                    color: '#F8B44F'
                                }],
                                global: false
                            },
                            barBorderRadius: [0, 10, 10, 0]
                        }
                    }, {
                        type: 'pie',
                        radius: ['10%', '36%'],
                        center: ['75%', '30%'],
                        data: pieData,
                        hoverAnimation: false,
                        label: {
                            show: true,
                            position: 'outside',
                            formatter: '{b}：{d}%',

                        },
                        zlevel: 2
                    }, {
                        // name: '外圈',
                        type: 'pie',
                        radius: ['36%', '37.5%'],
                        center: ['75%', '30%'],
                        hoverAnimation: false,
                        itemStyle: {
                            color: 'rgb(21 132 214 / 0.1)',
                        },
                        emphasis: {
                            itemStyle: {
                                color: 'rgb(21 132 214 / 0.1)'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [{
                            value: 1
                        }],
                        zlevel: 1
                    }, {
                        // name: '内圈',
                        type: 'pie',
                        radius: ['8.5%', '10%'],
                        center: ['75%', '30%'],
                        hoverAnimation: false,
                        itemStyle: {
                            color: 'rgb(21 132 214 / 0.1)',
                        },
                        emphasis: {
                            itemStyle: {
                                color: 'rgb(21 132 214 / 0.1)'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [{
                            value: 1
                        }],
                        zlevel: 1
                    }]
                }
            }
        },
    }
</script>

<style lang="scss" scoped>
</style>