<!-- 水球图 -->
<!-- 饼图 -->
<template>
    <div class="chart" ref="chart" id="myChart10"></div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill'
import 'echarts-wordcloud'
import { number, object, string } from 'vue-types'
import { useMonitorDevicesStore } from '/@/store/modules/monitorDevices'
// import { fontSize } from '@/views/groupPage/util'
import {
    defineComponent,
    reactive,
    toRefs,
    ref,
    watch,
    onMounted,
    getCurrentInstance,
} from 'vue'
import { toRaw } from 'vue'
export default defineComponent({
    name: 'WaterSphereDiagram',
    props: { toOnlineNum: Object },
    setup(props) {
        let toOnlineNum = toRaw(props.toOnlineNum)
        console.log("vue", toOnlineNum);
        return {
            props,
            toOnlineNum
        }
    },
    data() {
        return {
            myChart: null,
            deviceTotal: 0,
            onlineDeviceNum: 0,
        }
    },
    watch: {},
    async mounted() {
        const monitorDevicesStore = useMonitorDevicesStore();
        await this.getMonitorDevicesList(monitorDevicesStore);
        await this.$nextTick(() => {
            this.initCharts()
        })
    },

    methods: {
        //获取设备列表
        getMonitorDevicesList(monitorDevicesStore) {
            return new Promise((resolve) => {
                resolve(monitorDevicesStore.LiGongMonitorDevicesList({
                    pageNo: 1,
                    pageSize: 1000,
                }).then((res) => {
                    // console.log('获取设备列表+++++:', res)
                    this.deviceTotal = res.result.total
                    res.result.records.forEach(item => {
                        if (item.online) {
                            this.onlineDeviceNum++
                        } else if (!item.online) {
                            this.unOnlineDeviceNum++
                        }
                    });
                    //  console.log("数量",this.deviceTotal,this.onlineDeviceNum);
                }));
            })
        },
        // 初始化表格
        initCharts() {
            let value = (this.onlineDeviceNum / this.deviceTotal).toFixed(2)
            const myChart10 = echarts.init(document.getElementById('myChart10'))
            var option = {
                title: {
                    text: '',
                    left: '32%',
                    top: '55%',
                    textStyle: {
                        fontWeight: 'normal',
                        fontSize: 14,
                        color: 'green'
                    }
                },
                graphic: [{
                    type: 'group',
                    left: 'center',
                    top: '60%',
                    children: [{
                        type: 'text',
                        z: 100,
                        left: '10',
                        top: 'middle',
                        style: {
                            fill: '#B1E9FF',
                            text: '在线率',
                            font: '10px Microsoft YaHei'
                        }
                    }]
                }],
                series: [{
                    type: 'liquidFill',
                    radius: '45%',
                    center: ['50%', '50%'],
                    data: [value, value, value], // data个数代表波浪数
                    backgroundStyle: {
                        borderWidth: 1,
                        color: 'rgb(255,0,255,0)'
                    },
                    label: {
                        normal: {
                            formatter: (value * 100).toFixed(0) + '%',
                            textStyle: {
                                color: 'rgba(255,255,255,1)',
                                fontSize: 18
                            }
                        }
                    },
                    outline: {
                        show: false,
                    }
                },
                // {
                //     "type": "pie",
                //     "center": ["50%", "50%"],
                //     "radius": ["50%", "52%"],
                //     "hoverAnimation": false,
                //     "data": [{
                //         "name": "",
                //         "value": value * 100,
                //         labelLine: {
                //             show: false
                //         },
                //         itemStyle: {
                //             color: '#5886f0'
                //         },
                //         emphasis: {
                //             labelLine: {
                //                 show: false
                //             },
                //             itemStyle: {
                //                 color: '#5886f0'
                //             },
                //         }
                //     },
                    // { //画中间的图标
                    //     "name": "",
                    //     "value": 0.5,
                    //     labelLine: {
                    //         show: false
                    //     },
                    //     itemStyle: {
                    //         color: '#ffffff',
                    //         "normal": {
                    //             "color": "#5886f0",
                    //             "borderColor": "#5886f0",
                    //             "borderWidth": 10,
                    //             // borderRadius: '100%'
                    //         },
                    //     },
                    //     label: {

                    //         borderRadius: '100%'
                    //     },
                    //     emphasis: {
                    //         labelLine: {
                    //             show: false
                    //         },
                    //         itemStyle: {
                    //             color: '#5886f0'
                    //         },
                    //     }

                    // },
                    // { // 解决圆点过大后续部分显示明显的问题
                    //     "name": "",
                    //     "value": 0.5,
                    //     labelLine: {
                    //         show: false
                    //     },
                    //     itemStyle: {
                    //         color: '#5886f0'
                    //     },
                    //     emphasis: {
                    //         labelLine: {
                    //             show: false
                    //         },
                    //         itemStyle: {
                    //             color: '#5886f0'
                    //         },
                    //     }
                    // },
                    // { //画剩余的刻度圆环
                    //     "name": "",
                    //     "value": 80,
                    //     itemStyle: {
                    //         color: '#050038'
                    //     },
                    //     "label": {
                    //         show: false
                    //     },
                    //     labelLine: {
                    //         show: false
                    //     },
                    //     emphasis: {
                    //         labelLine: {
                    //             show: false
                    //         },
                    //         itemStyle: {
                    //             color: '#050038'
                    //         },
                    //     }
                    // }
                    ]
                
            };
            myChart10.setOption(option);
            // 自适应布局
            window.addEventListener("resize", function (event) {
                myChart10.resize();
            });

            // 当上面的自适应布局不其作用时，可以改换成下面这种
            // setTimeout(function () {
            //   window.onresize = function () {
            //     myChart1.resize();
            //     // swChart.resize();
            //   }
            // }, 200)

        },

    },
    beforeDestroy() { }
})
</script>
  
<style lang='less' scoped>
.chart {
    height: 100%;
    width: 100%;
    position: relative;
    top: -10px;
    left: 10px;
}
</style>