<template>
    <div>
        <div class="chart" :id="'pie-chart-' + 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: false,
            },
            width: {
                type: String,
                default: "100%",
            },
            height: {
                type: String,
                default: "18.519vh",
            },
            index: {
                type: Number,
                default: 1,
            },
            //  传入数据
            list: {
                type: Array,
                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(value) {
                var chartDom = document.getElementById('pie-chart-' + this.index);
                var chart = echarts.init(chartDom);
                let option = {
                    color: !this.theme ? ['#1C99FF', '#54575D'] : this.colors,
                    series: [{
                        type: 'pie',
                        radius: '60%',
                        left: -40,
                        data: [{
                                value: 1048,
                            },
                            {
                                value: 735,
                            }
                        ],
                        label: {
                            show: false
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                };



                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: {
            '$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>