let myChart = echarts.init(document.getElementById('pro-total-echarts'));
let myChart6 = echarts.init(document.getElementById('week-echarts'));
let myChart4 = echarts.init(document.getElementById('plan-trend-echarts'));
let myChart3 = echarts.init(document.getElementById('duty-total-progress-echarts'));
let myChart7 = echarts.init(document.getElementById('duty-detail-progress-echarts'));
let myChart8 = echarts.init(document.getElementById('person-echarts'));
let myChart9 = echarts.init(document.getElementById('no-execute-day-plan-echarts'));

/*工程统计数量 echarts*/
function initEchartsOne(totalNum, num, num2, num3) {
    let fontSize = '16', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#000';
    let tableData = [{
        value: num,
        name: "今日有作业"
    }, {
        value: num2,
        name: "今日未作业"
    },
    {
        value: num3,
        name: "停工工程"
    }]
    let option = {
        grid: {
            left: '0',
            right: '2%',
            top: '-20%',
            bottom: '0',
            containLabel: true
        },
        legend: {
            show: true,
            top: '50%',
            icon: 'circle',
            itemGap: 20,
            itemHeight: 15,
            textStyle: {
                fontSize: 16,
                color: fontColor,
                fontFamily: fontFamily
            },
            formatter: (params) => {
                if (params === '今日有作业') {
                    return params + ': ' + tableData[0].value;
                } else if (params === '今日未作业') {
                    return params + ': ' + tableData[1].value;
                } else if (params === '停工工程') {
                    return params + ': ' + tableData[2].value;
                }
            }
        },
        color: ['#66FFFF', '#36F097', '#FD9F6B'],
        xAxis: {
            show: false,
            type: 'value',
            boundaryGap: [0, 0]
        },
        yAxis: [
            {
                type: 'category',
                data: [''],
                axisLine: { show: false },
                axisTick: [{
                    show: false
                }]
            }
        ],
        series: [
            {
                type: 'bar',
                name: tableData[0].name,
                stack: '总量',
                barWidth: 20,
                label: {
                    show: true,
                    position: 'insideLeft',
                    color: "#fff",
                    formatter: '{c}%'
                },
                showBackground: true,
                backgroundStyle: {
                    color: '#66FFFF',
                    borderRadius: 0,
                },
                itemStyle: {
                    barBorderRadius: 0
                },
                data: [(num * 100 / totalNum).toFixed(2)]
            },
            {
                type: 'bar',
                name: tableData[1].name,
                stack: '总量',
                barWidth: 20,
                label: {
                    show: true,
                    color: "#fff",
                    position: 'inside',
                    formatter: '{c}%'
                },
                showBackground: true,
                backgroundStyle: {
                    color: '#36F097',
                    barBorderRadius: 0,
                },
                itemStyle: {
                    color: '#36F097',
                    barBorderRadius: 0,
                },
                silent: true,
                data: [(num2 * 100 / totalNum).toFixed(2)]
            },
            {
                type: 'bar',
                name: tableData[2].name,
                stack: '总量',
                barWidth: 20,
                label: {
                    show: true,
                    color: "#fff",
                    position: 'insideRight',
                    formatter: '{c}%'
                },
                showBackground: true,
                backgroundStyle: {
                    color: '#FD9F6B',
                    barBorderRadius: 0,
                },
                itemStyle: {
                    color: '#FD9F6B',
                    barBorderRadius: 0,
                },
                silent: true,
                data: [(num3 * 100 / totalNum).toFixed(2)]
            }
        ]
    }
    myChart.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

/* 周计划 echarts */
function initEchartsFive(twoNum, threeNum, fourNum, fiveNum) {
    let fontSize = '16', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#000';
    const data = [
        { name: '二级', value: parseInt(twoNum) },
        { name: '三级', value: parseInt(threeNum) },
        { name: '四级', value: parseInt(fourNum) },
        { name: '五级', value: parseInt(fiveNum) },
    ]
    let totalNum = 0, paddingLeft = 55;
    data.map(item => totalNum += item.value)
    if (totalNum < 100 && totalNum > 0) {
        paddingLeft = 48;
    } else if (totalNum >= 100 && totalNum < 1000) {
        paddingLeft = 40;
    } else if (totalNum >= 1000) {
        paddingLeft = 32;
    }
    let option = {
        // 环形图中间默认显示文字
        title: {
            text: `{a|${totalNum}}\n\n{b|周计划总数}`,
            top: 'center',
            left: 90,
            textStyle: {
                rich: {
                    a: {
                        fontSize: 30,
                        fontWeight: 'bold',
                        padding: [40, 0, 0, paddingLeft],
                        color: 'rgba(0,0,0,0.85)',
                        fontFamily: fontFamily
                    },
                    b: {
                        fontSize: 16,
                        padding: [0, 0, 40, 28],
                        color: 'rgba(0,0,0,0.65)',
                        fontFamily: fontFamily
                    }
                }
            }
        },
        tooltip: {
            backgroundColor: '#fff',
            extraCssText: 'box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);',
            padding: [12, 16, 12, 16],
            textStyle: {
                color: 'rgba(0,0,0,0.65)'
            },
            // 悬浮的位置可以调整，总距离左边10px
            position: (point) => {
                return ['10', point[1]]
            },
        },
        legend: {
            icon: 'circle',
            orient: 'vertial',
            itemWidth: 15,
            itemHeight: 15,
            right: 100,
            bottom: '20%',
            data: data,
            itemGap: 25,
            textStyle: {
                color: fontColor,
                fontFamily: fontFamily,
                fontSize: fontSize
            },
            formatter: (name) => {
                const value = data.find(item => item.name === name).value
                return `${name}：${value} `
            }
        },
        color: ['#FF4646', '#FD9F6B', '#FEE922', '#36F097', '#FFAC34', '#5AD7D8', '#8163E9', '#FF5F45', '#01C581', '#B754F6', '#FCDA0F', '#9B501B', '#A0D911', '#2998FF', '#938BF8'],
        series: [{
            name: '周计划',
            type: 'pie',
            radius: ['55%', '80%'],
            center: ['30%', '50%'], // 图形位置
            label: { // 鼠标悬浮具体数据显示
                show: false
            },
            data: data
        }]
    };
    myChart6.setOption(option);
    window.addEventListener("resize", function () {
        myChart6.resize();
    });
}

/* 计划趋势 echarts */
function initEchartsThree(nameList, valueList, valueList2) {
    let fontSize = '16', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#000';
    const backgroundColor = 'transparent';
    const color = ['#FF4646', '#FD9F6B', '#FFE922', '#32F474', '#3DD1F9', '#FFAD05']; //2个以上的series就需要用到color数组
    const legend = {
        orient: 'horizontal',
        icon: 'circle', //图例形状
        padding: 0,
        top: 5,
        right: 40,
        itemWidth: 14, //小圆点宽度
        itemHeight: 14, // 小圆点高度
        itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
        textStyle: {
            fontSize: 14,
            color: fontColor,
            fontFamily: fontFamily
        },
    };
    const tooltip = {
        show: true,
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
        // backgroundColor: 'rgba(0, 0, 0, 0.63)', //设置背景颜色
        textStyle: {
            color: fontColor,
            fontFamily: fontFamily
        },
        borderColor: "rgba(255,255,255, .5)",
    };
    let seriesData = [
        { name: '二级', data: valueList },
        { name: '三级', data: valueList2 },
    ];
    const commonConfigFn = (index) => {
        return {
            type: 'line',
            smooth: true,
            symbol: 'emptyCircle', //空心小圆点。线条小圆点形状
            symbolSize: 8, //小圆点大小
            itemStyle: {
                //还是小圆点设置
            },
            lineStyle: {
                width: 4, //线条设置

            },
            label: {
                normal: {
                    show: true,
                    position: [0, -10],
                    formatter: '{c}',
                    textStyle: {
                        color: fontColor,
                        fontSize: '14px',
                        fontFamily: fontFamily
                    }
                }
            },
            areaStyle: {
                //填充线条下面的面积区域颜色。（areaStyle只是锦上添花）
                opacity: 0.2,
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: color[index], // 上处的颜色
                        },
                        {
                            offset: 1,
                            color: 'transparent', // 下处的颜色
                        },
                    ],
                    global: false, // 缺省为 false
                },
            },
        };
    };

    seriesData = seriesData.map((item, index) => ({ ...item, ...commonConfigFn(index) }));
    let option = {
        backgroundColor,
        color,
        tooltip,
        legend,
        grid: {
            left: '3%',
            right: '3%',
            top: '15%',
            bottom: '2%',
            containLabel: true
        },
        xAxis: {
            show: true, //显示x轴+x轴label文字
            type: 'category',
            boundaryGap: true, //从Y轴出发，这个false很好的
            axisLine: {
                show: true, //显示x坐标轴轴线
                lineStyle: {
                    color: '#063374',
                    type: 'dashed'
                }
            },
            axisTick: {
                show: false, //不显示x坐标1cm刻度
            },
            axisLabel: {
                color: fontColor, //x轴label文字颜色
                fontSize: '12px'
            },
            splitLine: {
                show: false, //不显示grid竖向分割线
            },

            data: nameList,
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: fontColor,
            },
            axisLine: {
                show: false,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#063374',
                    type: 'dashed'
                }
            },
        },

        series: seriesData,
    };
    myChart4.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart4.resize();
    });
}

// 日计划 核实情况
function initEchartsEight(value) {
    let fontSize = '16', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#000';
    const dataArr = [
        {
            value: value.toFixed(2) * 100,
            name: '核实情况',
        },
    ];
    const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        {
            offset: 0,
            color: '#3C86DD', // 0% 处的颜色
        },
        {
            offset: 1,
            color: '#2FE3FB', // 100% 处的颜色
        },
    ]);
    const colorSet = [
        [value.toFixed(2), color],
        [1, '#F0F1F2'],
    ];
    const rich = {
        white: {
            fontSize: 16,
            color: fontColor,
            fontWeight: '500',
            fontFamily: fontFamily,
        },
        bule: {
            fontSize: 30,
            fontFamily: fontFamily,
            color: fontColor,
            fontWeight: '700',
        },
        radius: {
            width: 350,
            height: 80,
            borderWidth: 1,
            borderColor: '#0092F2',
            fontSize: 50,
            color: '#fff',
            backgroundColor: '#1B215B',
            borderRadius: 20,
            textAlign: 'center',
        },
        size: {
            height: 400,
            padding: [100, 0, 0, 0],
        },
    };
    let option = {
        backgroundColor: 'transparent',
        tooltip: {
            formatter: '{a} <br/>{b} : {c}%',
        },
        title: [
            {
                text: '未执行计划',
                x: "center",
                y: "30%",
                borderColor: "#fff",
                textStyle: {
                    fontWeight: "normal",
                    fontSize: 16,
                    color: '#E19146',
                    fontFamily: fontFamily
                },
            },
        ],
        series: [
            {
                type: 'gauge',
                radius: '100%',
                startAngle: '225',
                endAngle: '-45',
                pointer: {
                    show: false,
                },
                detail: {
                    formatter: function (value) {
                        var num = Math.round(value);
                        return '{bule|' + num + '}{white|%}';
                    },
                    rich: rich,
                    offsetCenter: ['0%', '20%'],
                },

                data: dataArr,
                title: {
                    show: true,
                    color: fontColor,
                    offsetCenter: ['0', '75%'],
                    fontSize: '16',
                    fontFamily: fontFamily
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: colorSet,
                        width: 25,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        opacity: 1,
                    },
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: false,
                    length: 35,
                    lineStyle: {
                        color: '#00377a',
                        width: 2,
                        type: 'solid',
                    },
                },
                axisLabel: {
                    show: false,
                },
            },
        ],
    };
    myChart9.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart9.resize();
    });
}

/* 值班进度-1 */
function initEchartsFour(num, totalNum) {
    let fontSize = '16', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#000';
    let rate = num === 0 || totalNum === 0 ? 0 : (parseInt(num) * 100 / parseInt(totalNum)).toFixed(2);
    let option = {
        backgroundColor: 'transparent',
        grid: {
            top: '2%',
            left: '10%',
            right: '5%',
            bottom: '2%',
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            // backgroundColor: 'rgba(0, 0, 0, 0.63)', //设置背景颜色
            textStyle: {
                color: fontColor,
                fontFamily: fontFamily
            },
            borderColor: "rgba(255,255,255, .5)",
            formatter: function (item) {
                return item[0].seriesName + ': ' + num + '（' + rate + '%' + ' )';
            },
        },
        yAxis: {
            show: false,
            data: ['值班进度'],
            axisLine: {
                lineStyle: {
                    color: '#0a4980',
                },
            },
            axisLabel: {
                textStyle: {
                    color: '#ADD6FF',
                    fontSize: 12,
                },
            },
        },
        xAxis: [
            {
                show: false,
                type: 'value',
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#0a4980',
                    },
                },
                axisLabel: {
                    show: true,
                    fontSize: 12,
                    textStyle: {
                        color: '#ADD6FF',
                    },
                },
            },
        ],
        series: [
            {
                name: '值班进度',
                type: 'bar',
                barWidth: 18,
                itemStyle: {
                    normal: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 0,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgb(26 167 246)', // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(26 167 246)', // 100% 处的颜色
                                },
                            ],
                            global: false, // 缺省为 false
                        },
                    },
                },
                data: [num],
                z: 0,
                zlevel: 0,
                label: {
                    show: true,
                    position: 'insideRight',
                    distance: 0,
                    formatter: function (data) {
                        return num + '（' + rate + '%' + ' )';
                    },
                    textStyle: {
                        color: '#000',
                        fontSize: fontSize,
                        fontFamily: fontFamily
                    },
                },
            },
            {
                name: '值班进度',
                type: 'bar',
                barGap: '-125%',
                data: [totalNum],
                barWidth: 27,
                label: {
                    show: true,
                    position: 'right',
                    textStyle: {
                        color: '#000',
                        fontSize: fontSize,
                        fontFamily: fontFamily
                    },
                },
                itemStyle: {
                    normal: {
                        color: 'transparent',
                        barBorderColor: 'rgb(148,217,249)',
                        barBorderWidth: 1,
                    },
                },
                z: 2,
            },
        ],
    };
    myChart3.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart3.resize();
    });
}
/* 值班进度-2 */
function initEchartsSix(userList, taskList, xsList, wzList) {
    let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#000';
    let option = {
        backgroundColor: 'transparent',
        tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            // backgroundColor: 'rgba(0, 0, 0, 0.63)', //设置背景颜色
            textStyle: {
                color: fontColor,
                fontFamily: fontFamily
            },
            // borderColor: "rgba(255,255,255, .5)",
        },
        legend: {
            icon: 'circle',
            data: ['任务总数', '已巡视数', '发现违章'],
            right: 20,
            textStyle: {
                color: fontColor,
                fontSize: fontSize,
                fontFamily: fontFamily
            },
            itemWidth: 15,
            itemHeight: 15,
            itemGap: 35
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: userList,
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#063374",
                    width: 1,
                    type: "solid"
                }
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: true,
                interval: 0, // 强制显示所有标签
                textStyle: {
                    color: fontColor,
                    fontFamily: fontFamily,
                    fontSize: fontSize
                }
            },
        }],
        yAxis: [{
            type: 'value',
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: fontColor,
                    width: 1,
                    type: "solid",
                },
            },
            splitLine: {
                lineStyle: {
                    color: '#063374',
                    type: 'dashed'
                }
            }
        }],
        series: [{
            name: '任务总数',
            type: 'bar',
            data: taskList,
            barWidth: 10, //柱子宽度
            barGap: 1, //柱子之间间距
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#59A5FF'
                    }, {
                        offset: 1,
                        color: '#36EBCA'
                    }]),
                    opacity: 1,
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    formatter: '{c}',
                    textStyle: {
                        color: fontColor,
                        fontSize: '14px',
                        fontFamily: fontFamily
                    }
                }
            },
        }, {
            name: '已巡视数',
            type: 'bar',
            data: xsList,
            barWidth: 10,
            barGap: 1,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#FFFB99'
                    }, {
                        offset: 1,
                        color: '#A4FFFA'
                    }]),
                    opacity: 1,
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    formatter: '{c}',
                    textStyle: {
                        color: fontColor,
                        fontSize: '14px',
                        fontFamily: fontFamily
                    }
                }
            },
        }, {
            name: '发现违章',
            type: 'bar',
            data: wzList,
            barWidth: 10,
            barGap: 1,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#CEFFC6'
                    }, {
                        offset: 1,
                        color: '#18FFE3'
                    }]),
                    opacity: 1,
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    formatter: '{c}',
                    textStyle: {
                        color: fontColor,
                        fontSize: '14px',
                        fontFamily: fontFamily
                    }
                }
            },
        }]
    };
    myChart7.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart7.resize();
    });
}

/* 人员统计 */
function initEchartsSeven(num, num2, num3) {
    let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#000';
    let option = {
        backgroundColor: 'transparent',
        tooltip: {
            // trigger: 'item',
            // formatter: "{b} : {c} ({d}%)"
            show: true,
            trigger: 'item',
            axisPointer: {
                type: 'shadow'
            },
            // backgroundColor: 'rgba(0, 0, 0, 0.63)', //设置背景颜色
            textStyle: {
                color: fontColor,
                fontFamily: fontFamily
            },
            // borderColor: "rgba(255,255,255, .5)",
            formatter: "{b} : {c} ({d}%)"
        },

        visualMap: {
            show: false,
            min: 500,
            max: 600,
            inRange: {
                //colorLightness: [0, 1]
            }
        },
        series: [{
            name: '人员统计',
            type: 'pie',
            radius: '70%',
            center: ['50%', '50%'],
            color: ['#36F097', '#F49968', '#66FFFF', '#1DB7E5'],
            data: [{
                value: num,
                name: '一般作业'
            },
            {
                value: num2,
                name: '特种作业'
            },
            {
                value: num3,
                name: '班组骨干'
            },
            ].sort(function (a, b) {
                return b.value - a.value
            }),
            roseType: 'radius',

            label: {
                normal: {
                    formatter: ['{c|{c}}', '{b|{b}}'].join('\n'),
                    rich: {
                        c: {
                            color: '#0AC4DE',
                            fontSize: 16,
                            fontWeight: 'bold',
                            lineHeight: 5
                        },
                        b: {
                            color: 'rgb(98,137,169)',
                            fontSize: 13,
                            height: 40,
                            color: fontColor
                        },
                    },
                }
            },
            labelLine: {
                normal: {
                    lineStyle: {
                        color: 'rgb(98,137,169)',
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20,

                }
            },
            itemStyle: {
                normal: {
                    shadowColor: 'rgba(0, 0, 0, 0.2)',
                    shadowBlur: 50,
                }
            }
        }]
    };
    myChart8.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart8.resize();
    });
}