var myChartUser = echarts.init(document.getElementById('zh-ryxxe'));
//var myChartCar = echarts.init(document.getElementById('zh-zqcl'));
var myChartLeaveCar = echarts.init(document.getElementById('zh-qjyc'));
var myChartCP = echarts.init(document.getElementById('zh-cpsd'));
var myChartKS = echarts.init(document.getElementById('zh-ryks'));

$(function () {
    //chartUser();
    //chartCar();
    //chartAlarm();
    //chartZG();
    //chartCP();
    //chartKS();
    window.onresize = function () {
        myChartUser.resize();
        //myChartCar.resize();
        myChartLeaveCar.resize();
        myChartCP.resize();
        myChartKS.resize();
    };
});

var m2R2Data = [{
    value: 0,
    legendname: '在岗',
    itemStyle: {
        color: "#4da1ff"
    }
},
{
    value: 0,
    legendname: '请休假',
    itemStyle: {
        color: "#ffcd31"
    }
},
];
var optionUser = {
    title: [{
        text: 0 + '人',
        subtext: '总岗数',
        textStyle: {
            fontSize: 40,
            color: "#ff7b8c",
            lineHeight: 86,
        },
        subtextStyle: {
            fontSize: 18,
            color: '#555555',
            lineHeight: 10,
        },
        textAlign: "center",
        x: '50%',
        y: '30%',
        itemGap: 0,

    }],
    tooltip: {
        trigger: 'item',
        formatter: function (parms) {
            var str = parms.seriesName + "</br>" +
                parms.marker + "" + parms.data.legendname + "</br>" +
                "数量：" + parms.data.value + "</br>" +
                "占比：" + parms.percent + "%";
            return str;
        }
    },
    legend: {
        show: false,
        type: "scroll",
        orient: 'vertical',
        left: '70%',
        align: 'left',
        top: 'middle',
        textStyle: {
            color: '#8C8C8C'
        },
        height: 250
    },
    series: [{
        name: '标题',
        type: 'pie',
        center: ['50%', '46%'],
        radius: ['67%', '76%'],
        clockwise: false, //饼图的扇区是否是顺时针排布
        avoidLabelOverlap: false,
        label: {
            normal: {
                show: false,
                position: 'outter',
                formatter: function (parms) {
                    return parms.data.legendname
                }
            }
        },
        labelLine: {
            normal: {
                length: 5,
                length2: 3,
                smooth: true,
            }
        },
        data: m2R2Data
    }]
};
// 使用刚指定的配置项和数据显示图表。
myChartUser.setOption(optionUser);


var optionLeaveCar = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        textStyle: {
            color: '#808eb7',
        },
        data: ['请假次数', '用车次数']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            axisLine: {
                lineStyle: {
                    color: '#808eb7',
                    width: 2
                }
            },
            boundaryGap: false,
            data: ['', '', '', '', '', '', ''],
            axisLabel: {
                interval: 0,  //设置间隔为0
                textStyle: {
                    fontSize: 10
                },
                rotate: 20
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: "次数/次",
            axisLine: {
                lineStyle: {
                    color: '#808eb7',
                    width: 2
                }
            },
            splitLine: { //分割线配置
                lineStyle: {
                    color: "#AAAAAA56",
                }
            },
            minInterval: 1
        }
    ],
    series: [
        {
            name: '请假次数',
            type: 'line',
            areaStyle: {},
            data: [0, 0, 0, 0, 0, 0, 0],
            itemStyle: {
                normal: {   //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0, color: '#5eaafe' // 0% 处的颜色
                    }, {
                        offset: 0.8, color: '#5eaafe' // 50% 处的颜色
                    }, {
                        offset: 1, color: '#fff' // 100% 处的颜色
                    }]
                    ),  //背景渐变色 
                    lineStyle: {        // 系列级个性化折线样式  
                        width: 3,
                        type: 'solid',
                        color: "#5eaafe"
                    }
                }
            },//线条样式  
            symbolSize: 10
        },
        {
            name: '用车次数',
            type: 'line',
            areaStyle: {},
            data: [0, 0, 0, 0, 0, 0, 0],
            itemStyle: {
                normal: {   //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0, color: '#81d486' // 0% 处的颜色
                    }, {
                        offset: 0.5, color: '#81d486' // 50% 处的颜色
                    }, {
                        offset: 1, color: '#fff' // 100% 处的颜色
                    }]
                    ),  //背景渐变色 
                    lineStyle: {        // 系列级个性化折线样式  
                        width: 3,
                        type: 'solid',
                        color: "#81d486"
                    }
                }
            },//线条样式  
            symbolSize: 10
        }
    ]
};

myChartLeaveCar.setOption(optionLeaveCar);

//查铺统计

var optionCP = {
    backgroundColor: "#ffffff",
    "tooltip": {
        "trigger": "axis",
        "axisPointer": {
            "type": "shadow",
            textStyle: {
                color: "#fff"
            }

        },
    },
    "grid": {
        "borderWidth": 0,
        "top": "20%",
        "bottom": "10%",
        "left": "8%",
        "right": "2%",
        textStyle: {
            color: "#fff"
        }
    },
    "legend": {
        x: 'center',
        top: '4%',
        textStyle: {
            color: '#555',
        },
        "data": ['实到', '缺席', '总数']
    },


    "calculable": true,
    "xAxis": [{
        "type": "category",
        "axisLine": {
            lineStyle: {
                color: '#eceeef'
            }
        },
        "splitLine": {
            "show": false
        },
        "axisTick": {
            "show": false
        },
        "splitArea": {
            "show": false
        },
        "axisLabel": {
            "interval": 0,
            "textStyle": {
                "fontSize": "10",
                "color": "#a3adcb"
            },
            "rotate": 15

        },
        "data": [],
    }],
    "yAxis": [{
        "type": "value",
        "splitLine": {
            "show": false
        },
        "axisLine": {
            lineStyle: {
                color: '#eceeef'
            }
        },
        "axisTick": {
            "show": false
        },
        "axisLabel": {
            "interval": 0,
            "textStyle": {
                "fontSize": "14",
                "color": "#cccccc"
            }

        },
        "splitArea": {
            "show": false
        },

    }],
    "series": [{
        "name": "实到",
        "type": "bar",
        "stack": "总量",
        "barMaxWidth": 20,
        "barGap": "10%",
        "itemStyle": {
            "normal": {
                "color": "rgba(94,170,255,1)",
                "label": {
                    "show": true,
                    "textStyle": {
                        "color": "#fff"
                    },
                    "position": "inside",
                    formatter: function (p) {
                        return p.value > 0 ? (p.value) : '';
                    }
                }
            }
        },
        "data": [
            0,
            0,
            0,
            0,
            0,
            0,
            0
        ],
    },

    {
        "name": "缺席",
        "type": "bar",
        "stack": "总量",
        "itemStyle": {
            "normal": {
                "color": "rgba(129,212,133,1)",
                "barBorderRadius": 0,
                "label": {
                    "show": true,
                    "position": "inside",
                    formatter: function (p) {
                        return p.value > 0 ? (p.value) : '';
                    }
                }
            }
        },
        "data": [
            0,
            0,
            0,
            0,
            0,
            0,
            0
        ]
    }, {
        "name": "总数",
        "type": "line",
        symbolSize: 8,
        symbol: 'circle',
        "itemStyle": {
            "normal": {
                "color": "rgba(255,195,0,1)",
                "barBorderRadius": 0,
                "label": {
                    "show": true,
                    "position": "top",
                    formatter: function (p) {
                        return p.value > 0 ? (p.value) : '';
                    }
                }
            }
        },
        "data": [
            0,
            0,
            0,
            0,
            0,
            0,
            0
        ]
    },
    ]
}
// 使用刚指定的配置项和数据显示图表。
myChartCP.setOption(optionCP);

//考试统计

dataks = [{
    name: "≥90",
    value: 0
},
{
    name: "80~89",
    value: 0
},
{
    name: "70~79",
    value: 0
},
{
    name: "60~69",
    value: 0
},
{
    name: "≤59",
    value: 0
}
];
arrName = getArrayValue(dataks, "name");
arrValue = getArrayValue(dataks, "value");
sumValue = eval(arrValue.join('+'));
objData = array2obj(dataks, "name");
optionData = getData(dataks);

function getArrayValue(array, key) {
    var key = key || "value";
    var res = [];
    if (array) {
        array.forEach(function (t) {
            res.push(t[key]);
        });
    }
    return res;
}

function array2obj(array, key) {
    var resObj = {};
    for (var i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i];
    }
    return resObj;
}

function getData(data) {
    var res = {
        series: [],
        yAxis: []
    };
    for (let i = 0; i < data.length; i++) {
        res.series.push({
            name: '成绩',
            type: 'pie',
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [75 - i * 18 + '%', 66 - i * 18 + '%'],
            center: ["40%", "50%"],
            label: {
                show: false
            },
            itemStyle: {
                label: {
                    show: false,
                },
                labelLine: {
                    show: false
                },
                borderWidth: 5,
            },
            data: [{
                value: data[i].value,
                name: data[i].name
            }, {
                value: sumValue - data[i].value,
                name: '',
                itemStyle: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0
                },
                tooltip: {
                    show: false
                },
                hoverAnimation: false
            }]
        });
        res.series.push({
            name: '',
            type: 'pie',
            silent: true,
            z: 1,
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [75 - i * 18 + '%', 66 - i * 18 + '%'],
            center: ["40%", "50%"],
            label: {
                show: false
            },
            itemStyle: {
                label: {
                    show: false,
                },
                labelLine: {
                    show: false
                },
                borderWidth: 5,
            },
            data: [{
                value: 7.5,
                itemStyle: {
                    color: "#E3F0FF",
                    borderWidth: 0
                },
                tooltip: {
                    show: false
                },
                hoverAnimation: false
            }, {
                value: 2.5,
                name: '',
                itemStyle: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0
                },
                tooltip: {
                    show: false
                },
                hoverAnimation: false
            }]
        });
        if (sumValue==0) {
            res.yAxis.push("0%");
        } else {
            res.yAxis.push((data[i].value / sumValue * 100).toFixed(2) + "%");
        }
        
    }
    return res;
}

var optionKS = {
    title: {
        text: '考试成绩分布',
        textStyle: {
            color: '#666666'
        }
    },
    backgroundColor: '#fff',
    legend: {
        show: true,
        top: "top",
        left: '70%',
        data: arrName,
        itemWidth: 30,
        itemHeight: 20,
        width: 50,
        padding: [0, 5],
        itemGap: 25,
        formatter: function (name) {
            return "{title|" + name + "}\n{value|" + (objData[name].value) + "人}"
        },
        textStyle: {
            rich: {
                title: {
                    fontSize: 10,
                    lineHeight: 10,
                    color: "rgba(0,0,0,.45)"
                },
                value: {
                    fontSize: 14,
                    lineHeight: 18,
                    color: "rgba(0,0,0,.85)"
                }
            }
        },
    },
    tooltip: {
        show: true,
        trigger: "item",
        formatter: "{a}<br>{b}:{c}({d}%)"
    },
    color: ['#FF8700', '#ffc300', '#00e473', '#009DFF'],
    grid: {
        top: '10%',
        bottom: '48%',
        left: "40%",
        containLabel: false
    },
    yAxis: [{
        type: 'category',
        inverse: true,
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            interval: 0,
            inside: true,
            textStyle: {
                color: "#000",
                fontSize: 10,
            },
            show: true
        },
        data: optionData.yAxis
    }],
    xAxis: [{
        show: false
    }],
    series: optionData.series
};
// 使用刚指定的配置项和数据显示图表。
myChartKS.setOption(optionKS);