<!-- 统计图 4：按照应用聚合登录数据 - 饼图  -->
<template>
    <div class="echarts-div" id="user-login-sta-url-group" ref="user-login-sta-url-group"></div>
</template>

<script setup name="com-chart-t4">
import {getCurrentInstance, onMounted} from "vue";
import * as echarts from 'echarts';
import {useComStore} from "../../store/com";
const { proxy } = getCurrentInstance();

const f5UserLoginStaByClientGroup = function(dataList) {
    // ===========================================  定义数据
    var dataArray = dataList;
    // console.log('res.data', dataArray);
    dataArray.forEach(function(item) {
        item.value = item.count;
        if(!item.name) {
            item.name = 'No Jump';
        }
    })

    // ===========================================  开始渲染

    // var myChart = echarts.init(document.getElementById('user-login-sta-url-group'));
    var myChart = echarts.init(proxy.$refs['user-login-sta-url-group']);
    
    const option = {
        title: {
            text: '登录应用统计',
            left: 'left',
            top: 0,
            textStyle: {
                color: '#666',
                fontSize: '14'
            }
        },
        toolbox: {
            show: true,
            top: 0,
            feature: {
                saveAsImage: {
                    show: true
                }
            }
        },
        tooltip: {
            trigger: 'item',
            // formatter: "{a} <br/>{b} : {c} ({d}%)"
            formatter: "<p style='width: 230px; white-space: normal;'>应用：{b} <br/>登录：{c} 次 （{d}%）</p>"
        },
        series: [{
            name: '登录应用统计',
            type: 'pie',
            // radius: '60%', // 半径大小
            radius: ['30%', '55%'],
            center: ['50%', '60%'],
            selectedMode: 'single',
            data: dataArray.sort(function(a, b) {
                return a.value - b.value;
            }),
            // roseType: 'radius', // 半径模式还是面积模式
            itemStyle: {
                borderRadius: 2,
                color: function(params) {
                    // build a color map as your need.
                    var colorList = [
                        '#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
                        '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
                        '#1e90ff','#ff6347','#7b68ee','#00fa9a',
                        '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'
                    ];
                    // '#ffd700',
                    function GetRandomNum(Min, Max) {
                        var Range = Max - Min;
                        var Rand = Math.random();
                        return (Min + Math.round(Rand * Range));
                    }
                    var index = GetRandomNum(0, colorList.length - 1);
                    return colorList[index];
                    //return colorList[params.dataIndex]
                }
            },
            label: {
                formatter: '{b|{b}：}{c}  {per|{d}%}  ',
                rich: {},
                color: 'inherit'
            },
            // 弹出动画 
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            }
        }]
    };
    myChart.setOption(option);
    // window.myChartList.push(myChart);
    useComStore().pushResizeCallback('com-chart-t4', function (){
        myChart.resize();
    })
};

onMounted(function (){
    // 刷新所有图标数据
    sa.ajax('/StaData/getUserLoginStaByClientGroup', function(res){
        f5UserLoginStaByClientGroup(res.data);
    }, {msg: null});
})
</script>

<style scoped>
	
</style>
