let myChart = echarts.init(document.getElementById('person-echarts'));
let myChart3 = echarts.init(document.getElementById('team-echarts'));
let myChart4 = echarts.init(document.getElementById('ticket-echarts'));
let myChart5 = echarts.init(document.getElementById('risk-echarts'));
let myChart6 = echarts.init(document.getElementById('weekPlan-echarts'));
/*人员情况 echarts*/
function initEchartsOne(nameList, valueList) {
    let fontSize = '16', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
    let option = {
        backgroundColor: 'transparent',
        grid: {
            left: '1%',
            right: '1%',
            top: '5%',
            bottom: '2%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            backgroundColor: 'rgba(0, 0, 0, 0.63)', //设置背景颜色
            textStyle: {
                color: fontColor,
                fontFamily: fontFamily
            },
            borderColor: "rgba(255,255,255, .5)",
        },
        xAxis: [{
            type: 'category',
            boundaryGap: 1,
            axisLine: {
                show: false
            },
            axisLabel: {
                color: fontColor,
                fontFamily: fontFamily
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },

            data: nameList
        }],
        yAxis: [{
            type: 'value',
            name: '',
            padding: 5,
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#063374',
                    type: 'dashed'
                }
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                show: true,
                margin: 10,
                textStyle: {
                    color: fontColor,
                    fontFamily: fontFamily

                }
            },
            axisTick: {
                show: false
            }
        },

        ],
        series: [
            {
                name: '施工人数',
                type: 'line',
                smooth: true,
                stack: '总量',
                symbolSize: 5,
                showSymbol: true,
                label: {
                    normal: {
                        show: true,
                        position: [0,-10],
                        formatter: '{c}',
                        textStyle: {
                            color: fontColor,
                            fontSize: '14px',
                            fontFamily: fontFamily
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#23D0C4',
                        lineStyle: {
                            color: "#23D0C4",
                            width: 4
                        },
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgba(15, 61, 161, 0.6)'
                            },
                            {
                                offset: 0.5,
                                color: 'rgba(15, 61, 161, 0.3)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(15, 61, 161, 0.1)'
                            }
                        ], false),
                    }
                },
                data: valueList
            },

        ]
    };
    myChart.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

/* 队伍情况 echarts */
function initEchartsTwo(nameList, valueList) {
    let fontSize = '16', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
    let option = {
        backgroundColor: 'transparent',
        grid: {
            left: '1%',
            right: '1%',
            top: '5%',
            bottom: '2%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            backgroundColor: 'rgba(0, 0, 0, 0.63)', //设置背景颜色
            textStyle: {
                color: fontColor,
                fontFamily: fontFamily
            },
            borderColor: "rgba(255,255,255, .5)",
        },
        xAxis: [{
            type: 'category',
            boundaryGap: 1,
            axisLine: {
                show: false
            },
            axisLabel: {
                color: fontColor,
                fontFamily: fontFamily
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },

            data: nameList
        }],
        yAxis: [{
            type: 'value',
            name: '',
            padding: 5,
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#063374',
                    type: 'dashed'
                }
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                show: true,
                margin: 10,
                textStyle: {
                    color: fontColor,
                    fontFamily: fontFamily

                }
            },
            axisTick: {
                show: false
            }
        },

        ],
        series: [
            {
                name: '施工队伍',
                type: 'line',
                smooth: true,
                stack: '总量',
                symbolSize: 5,
                showSymbol: true,
                label: {
                    normal: {
                        show: true,
                        position: [0,-10],
                        formatter: '{c}',
                        textStyle: {
                            color: fontColor,
                            fontSize: '14px',
                            fontFamily: fontFamily
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#41B5FF',
                        lineStyle: {
                            color: "#41B5FF",
                            width: 4
                        },
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(82, 191, 255, 0.3)'
                        }, {
                            offset: 0.8,
                            color: 'rgba(82, 191, 255, 0)'
                        }], false),
                        shadowColor: 'rgba(228, 139, 76, 0.1)',
                        shadowBlur: 10
                    }
                },
                data: valueList
            },

        ]
    };
    myChart3.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart3.resize();
    });
}

/* 作业票趋势 echarts */
function initEchartsThree(nameList, valueList, valueList2) {
    let fontSize = '16', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
    const backgroundColor = 'transparent';
    const color = ['#FF5D5D', '#32F474', '#FFE922', '#32F474', '#3DD1F9', '#FFAD05']; //2个以上的series就需要用到color数组
    const legend = {
        orient: 'horizontal',
        icon: 'circle', //图例形状
        padding: 0,
        top: 1,
        right: 40,
        itemWidth: 14, //小圆点宽度
        itemHeight: 14, // 小圆点高度
        itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
        textStyle: {
            fontSize: 14,
            color: '#ffffff',
            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: 'A票', data: valueList },
        { name: 'B票', 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: '1%',
            right: '1%',
            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();
    });
}

/* 风险趋势 echarts */
function initEchartsFour(nameList, valueList, valueList2, valueList3, valueList4) {
    let fontSize = '16', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
    const backgroundColor = 'transparent';
    const color = ['#FF5D5D', '#F9770F', '#FFE922', '#32F474', '#3DD1F9', '#FFAD05']; //2个以上的series就需要用到color数组
    const legend = {
        orient: 'horizontal',
        icon: 'circle', //图例形状
        padding: 0,
        top: 1,
        right: 40,
        itemWidth: 14, //小圆点宽度
        itemHeight: 14, // 小圆点高度
        itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
        textStyle: {
            fontSize: 14,
            color: '#ffffff',
            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 },
        { name: '四级', data: valueList3 },
        { name: '五级', data: valueList4 },
    ];
    const commonConfigFn = (index) => {
        return {
            type: 'line',
            smooth: true,
            symbol: 'emptyCircle', //空心小圆点。线条小圆点形状
            symbolSize: 8, //小圆点大小
            itemStyle: {
                //还是小圆点设置
            },

            label: {
                show: false, //不显示小圆点上的label文字
            },
            lineStyle: {
                width: 4, //线条设置

            },

            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: '1%',
            right: '1%',
            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文字颜色
            },
            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,
    };
    myChart5.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart5.resize();
    });
}

/* 周计划 echarts */
function initEchartsFive(twoNum, threeNum, fourNum, fiveNum) {
    let fontSize = '16', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
    function getParametricEquation(
        startRatio,
        endRatio,
        isSelected,
        isHovered,
        k,
        height,
        i
    ) {
        // 计算
        let midRatio = (startRatio + endRatio) / 2;

        let startRadian = startRatio * Math.PI * 2;
        let endRadian = endRatio * Math.PI * 2;
        let midRadian = midRatio * Math.PI * 2;

        // 如果只有一个扇形，则不实现选中效果。
        if (startRatio === 0 && endRatio === 1) {
            isSelected = false;
        }

        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
        k = typeof k !== "undefined" ? k : 1 / 3;

        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
        let offsetZ = i == 1 ? 2 : 0;
        // 计算高亮效果的放大比例（未高亮，则比例为 1）
        let hoverRate = isHovered ? 1.05 : 1;

        // 返回曲面参数方程
        return {
            u: {
                min: -Math.PI,
                max: Math.PI * 3,
                step: Math.PI / 32,
            },

            v: {
                min: 0,
                max: Math.PI * 2,
                step: Math.PI / 20,
            },

            x: function (u, v) {
                if (u < startRadian) {
                    return (
                        offsetX +
                        Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
                    );
                }
                if (u > endRadian) {
                    return (
                        offsetX +
                        Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
                    );
                }
                return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
            },

            y: function (u, v) {
                if (u < startRadian) {
                    return (
                        offsetY +
                        Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
                    );
                }
                if (u > endRadian) {
                    return (
                        offsetY +
                        Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
                    );
                }
                return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
            },

            z: function (u, v) {
                if (u < -Math.PI * 0.5) {
                    return Math.sin(u);
                }
                if (u > Math.PI * 2.5) {
                    return Math.sin(u);
                }
                return Math.sin(v) > 0 ? 1 * height : -1;
            },
        };
    }
    // 生成模拟 3D 饼图的配置项
    function getPie3D(pieData, internalDiameterRatio) {
        let series = [];
        let sumValue = 0;
        let startValue = 0;
        let endValue = 0;
        let legendData = [];
        let k =
            typeof internalDiameterRatio !== "undefined"
                ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
                : 1 / 3;

        // 为每一个饼图数据，生成一个 series-surface 配置
        for (let i = 0; i < pieData.length; i++) {
            sumValue += pieData[i].value;

            let seriesItem = {
                name:
                    typeof pieData[i].name === "undefined"
                        ? `series${i}`
                        : pieData[i].name,
                type: "surface",
                parametric: true,
                wireframe: {
                    show: false,
                },
                pieData: pieData[i],
                pieStatus: {
                    selected: false,
                    hovered: false,
                    k: k,
                },
            };

            if (typeof pieData[i].itemStyle != "undefined") {
                let itemStyle = {};

                typeof pieData[i].itemStyle.color != "undefined"
                    ? (itemStyle.color = pieData[i].itemStyle.color)
                    : null;
                typeof pieData[i].itemStyle.opacity != "undefined"
                    ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
                    : null;

                seriesItem.itemStyle = itemStyle;
            }
            series.push(seriesItem);
        }

        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
        for (let i = 0; i < series.length; i++) {
            endValue = startValue + series[i].pieData.value;
            series[i].pieData.startRatio = startValue / sumValue;
            series[i].pieData.endRatio = endValue / sumValue;
            series[i].parametricEquation = getParametricEquation(
                series[i].pieData.startRatio,
                series[i].pieData.endRatio,
                false,
                false,
                k,
                // 调整扇形高度
                i === 0 ? 10 : 10,
                i,
                series[i].pieData.value
            );

            startValue = endValue;

            legendData.push(series[i].name);
        }
        return series;
    }
    // 传入数据生成 option
    const optionsData = [
        {
            name: "二级",
            value: !twoNum ? 0 : twoNum,
            itemStyle: {
                //   opacity: 0.5,
                color: "#FF5D5D",
            },
        },

        {
            name: "三级",
            value: !threeNum ? 0 : threeNum,
            itemStyle: {
                //   opacity: 0.5,
                color: "#F9770F",
            },
        },
        {
            name: "四级",
            value: !fourNum ? 0 : fourNum,
            itemStyle: {
                //   opacity: 0.5,
                color: "#FFE922",
            },
        },
        {
            name: "五级",
            value: !fiveNum ? 0 : fiveNum,
            itemStyle: {
                //   opacity: 0.5,
                color: "#32F474",
            },
        },
    ];
    const series = getPie3D(optionsData, 0);// 可做为调整内环大小 0为实心圆饼图，大于0 小于1 为圆环
    series.push({
        name: "pie2d",
        type: "pie",
        label: {
            opacity: 1,
            fontSize: 14,
            lineHeight: 20,
            textStyle: {
                fontSize: 14,
                color: "#fff",
            },
        },
        labelLine: {
            length: 30,
            length2: 30,
        },
        startAngle: -30, //起始角度，支持范围[0, 360]。
        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
        radius: ["40%", "60%"],
        center: ["50%", "50%"],
        data: optionsData,
        itemStyle: {
            opacity: 0,
        },
    });
    // 准备待返回的配置项，把准备好的 legendData、series 传入。
    let option = {
        legend: {
            show: true,
            tooltip: {
                show: true,
            },
            orient: "vertical",
            data: ["二级", "三级", "四级", "五级"],
            top: "center",
            itemGap: 14,
            itemHeight: 10,
            itemWidth: 20,
            right: "2%",
            textStyle: {
                color: "#fff",
                fontSize: 14,
            },
        },
        animation: true,
        tooltip: {
            formatter: (params) => {
                if (
                    params.seriesName !== "mouseoutSeries" &&
                    params.seriesName !== "pie2d"
                ) {
                    return `${params.seriesName
                        }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
                        };"></span>${option.series[params.seriesIndex].pieData.value + "条"
                        }`;
                }
            },
            backgroundColor: 'rgba(0, 0, 0, 0.63)', //设置背景颜色
            textStyle: {
                color: fontColor,
                fontFamily: fontFamily
            },
            borderColor: "rgba(255,255,255, .5)",
        },
        title: {
            x: "center",
            top: "20",
            textStyle: {
                color: "#fff",
                fontSize: 22,
            },
        },
        backgroundColor: "transparent",
        labelLine: {
            show: true,
            lineStyle: {
                color: "#7BC0CB",
            },
            normal: {
                show: true,
                length: 10,
                length2: 10,
            },
        },
        label: {
            show: true,
            position: "outside",
            formatter: "{b} \n{d}%",
            textStyle: {
                color: "#fff",
                fontSize: "14px",
                fontFamily: fontFamily
            },
        },
        xAxis3D: {
            min: -1,
            max: 1,
        },
        yAxis3D: {
            min: -1,
            max: 1,
        },
        zAxis3D: {
            min: -1,
            max: 1,
        },
        grid3D: {
            show: false,
            boxHeight: 2,
            //top: '30%',
            left: '4%',
            bottom: "50%",
            // environment: "rgba(255,255,255,0)",
            viewControl: {
                distance: 320,
                alpha: 30,
                beta: 20,
                autoRotate: true, // 自动旋转
            },
        },
        series: series,
    };
    myChart6.setOption(option);
    window.addEventListener("resize", function () {
        myChart6.resize();
    });
}