<template>
    <div v-if="pageflag" style="overflow:hidden;width: 100%;height:250px;font-size:12px;line-height:24px;">
        <div style="width: 400px;height: 220px;margin: 10px 20px;">
            <div ref="orderStatusBing" style="width: 100%;height: 80%"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { iotProductCount } from '@/api/iot/alertLog';

export default {
    data() {
        return {
            deviceLogList: [],
            pageflag: true,
        };
    },
    created() {
        this.getList();
    },
    methods: {
        getList() {
            iotProductCount().then((rp) => {
                this.deviceLogList = rp.data.data
                this.initBingEquipments();
            });
        },
        initBingEquipments() {
            const myEcharts = echarts.init(this.$refs.orderStatusBing);
            let colors = ['#22C1D9', '#13577A', '#22D989','#FFFFFF','#0C82E6']
            // 传入数据生成 option
            let optionsData = [];
            for (let i = 0; i < this.deviceLogList.length; i++) {
                optionsData.push(
                    {
                        name: this.deviceLogList[i].name,
                        value: this.deviceLogList[i].value,
                        itemStyle: {
                            color: colors[i],
                        }
                    }
                );
            }
            myEcharts.setOption({
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    left: 'left',
                    textStyle: {
                        color: '#fff',
                        fontSize: '12px',
                    },
                },
                series: [
                    {
                        type: 'pie',
                        radius: [40, 60],
                        data: optionsData,
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false
                        },
                    }
                ]
            });
        }
    },
};
</script>