<template>
    <div>
        <div class="chart" :id="'pie-chart-x-' + index" style="width:50%;height: 120px"></div>
    </div>
</template>

<script>
    import * as echarts from "echarts";

    export default {
        name: "percent-pie",
        componentName: "percent-pie",
        props: {
            theme: {
                type: Boolean,
                default: true,
            },
            width: {
                type: String,
                default: "100%",
            },
            height: {
                type: String,
                default: "18.519vh",
            },
            index: {
                type: Number,
                default: 1,
            },
            //  传入数据
            data: {
                type: Object,
                default: () => {},
            },
            colors: {
                type: Array,
                default: () => ["#FF9B23", "#1C99FF"],
            },
        },
        data() {
            return {
                id: "",
                chart: null,
                firstAnimation: true,
            };
        },

        computed: {
            datas() {
                return this.list.map((t) => {
                    return t.value;
                });
            },
        },
        methods: {
            initChart() {
                var chartDom = document.getElementById('pie-chart-x-' + this.index);
                chartDom.removeAttribute("_echarts_instance_") ? chartDom.removeAttribute("_echarts_instance_") : ''

                var chart = echarts.init(chartDom);
                var option;
                let titleStr = this.index === 1 ? this.data.yjhwcl + '%' : this.data.njhwcl + '%'
                option = {
                    title: {
                        text: titleStr,
                        top: 'center',
                        left: 'center',
                        textStyle: {
                            fontSize: 16,
                            color: !this.theme ? '#fff' : '#1850B3'
                        }
                    },
                    color: !this.theme ? ['#1C99FF', '#54575D'] : ['#1850B3', '#B2B8CA'],
                    series: [{
                        name: 'Access From',
                        type: 'pie',
                        radius: ['60%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                formatter: '{b}: {d}%'
                            }
                        },
                        emphasis: {
                            label: {
                                show: false,
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [{
                            value: this.index === 1 ? this.data.yjhwcl > 100 ? 100 : this.data
                                .yjhwcl : this.data.njhwcl > 100 ? 100 : this.data.njhwcl,
                            name: '分'
                        }, {
                            value: this.index === 1 ? (100 - this.data.yjhwcl) < 1 ? 0 : (100 - this
                                .data.yjhwcl) : (100 - this.data
                                .njhwcl) < 1 ? 0 : (100 - this.data.njhwcl),
                            name: '总'
                        }]
                    }]
                };



                chart.clear();
                chart.setOption(option);
                chart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: 0 // 这里的数字代表你想一直显示hover效果的饼图部分的索引
                });

                this.resize = function () {
                    chart.resize();
                };

                window.removeEventListener("resize", this.resize);
                window.addEventListener("resize", this.resize);
            },
            handleElectricDetail() {},
        },
        mounted() {
            this.initChart();
        },
        watch: {
            data() {
                this.initChart()
            },
            '$store.state.theme'(val) {
                this.initChart()
            },
        },
        unmounted() {
            window.removeEventListener("resize", this.resize);
        },
    };
</script>

<style lang="less">
    .chart {
        width: 100%;
        height: 100%;
        display: inline-block;
        cursor: default;
    }
</style>