let myChart = echarts.init(document.getElementById('pro-risk'));
let myChart2 = echarts.init(document.getElementById('pro-progress-echarts'));
let myChart3 = echarts.init(document.getElementById('pro-cost'));

/* 项目风险 */
function initEchartsOne(day, week, warn) {
    let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
    let xLabel = day;
    let dataValue = week;
    let dataValue1 = warn;
    const tooltip = {
        show: true,
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
        backgroundColor: 'rgba(75, 79, 82, 0.80)', //设置背景颜色
        textStyle: {
            color: fontColor,
            fontFamily: fontFamily
        },
        borderColor: "rgba(255,255,255, .5)",
    };
    let option = {
        backgroundColor: 'transparent',
        tooltip,
        legend: {
            show: true,
            top: '15%',
            right: '2%',
            itemWidth: 30, // 图例标记的图形宽度。
            //   itemGap: 20, // 图例每项之间的间隔。
            itemHeight: 10, //  图例标记的图形高度。
            textStyle: {
                color: '#fff',
                fontSize: 14,
                padding: [0, 8, 0, 8]
            }
        },
        grid: {
            top: '25%',
            left: '5%',
            right: '5%',
            bottom: '15%',
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                axisLine: {
                    //坐标轴轴线相关设置。数学上的x轴
                    show: true,
                    lineStyle: {
                        color: '#5A6E71',
                    },
                },
                axisLabel: {
                    //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: fontColor,
                        fontSize: fontSize,
                        fontFamily: fontFamily
                    },
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#233653',
                    },
                },
                axisTick: {
                    show: false,
                },
                data: xLabel,
            },
        ],
        yAxis: [
            {
                name: "",
                nameTextStyle: {
                    color: fontColor,
                    fontSize: fontSize,
                    padding: [0, 60, 0, 0],
                    fontFamily: fontFamily
                },
                // minInterval: 1,
                type: 'value',
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#25393B',
                        type: 'dashed'
                    },
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#008de7',
                    },
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: fontColor,
                        fontSize: fontSize,
                        fontFamily: fontFamily
                    }
                },
                axisTick: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: '周计划数',
                type: 'line',
                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                smooth: true,
                lineStyle: {
                    normal: {
                        width: 3,
                        color: '#1ED6FF', // 线条颜色
                    },
                },
                itemStyle: {
                    normal: {
                        color: '#1ED6FF',//拐点颜色
                        // borderColor: '#fff600',//拐点边框颜色
                        // borderWidth: 13//拐点边框大小
                        label: {
                            show: true, //开启显示
                            color: fontColor,
                            fontFamily: fontFamily,
                            position: 'top', //在上方显示
                            formatter: function (res) {
                                if (res.value) {
                                    return res.value
                                } else {
                                    return 0
                                }
                            },
                        },
                    },

                },
                symbolSize: 8,   //设定实心点的大小
                areaStyle: {
                    normal: {
                        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: '#1ED6FF30',
                                },
                                {
                                    offset: 0.6,
                                    color: '#1ED6FF20',
                                },
                                {
                                    offset: 1,
                                    color: '#1ED6FF10',
                                },
                            ],
                            false
                        ),
                    },
                },
                data: dataValue,
            },
            {
                name: '风险数',
                type: 'line',
                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                smooth: true,
                lineStyle: {
                    normal: {
                        width: 3,
                        color: '#FE533C', // 线条颜色
                    },
                },
                itemStyle: {
                    normal: {
                        color: '#FE533C',//拐点颜色
                        // borderColor: '#fff600',//拐点边框颜色
                        // borderWidth: 13//拐点边框大小
                        label: {
                            show: true, //开启显示
                            color: fontColor,
                            fontFamily: fontFamily,
                            position: 'top', //在上方显示
                            formatter: function (res) {
                                if (res.value) {
                                    return res.value
                                } else {
                                    return 0
                                }
                            },
                        },
                    },

                },
                symbolSize: 8,   //设定实心点的大小
                areaStyle: {
                    normal: {
                        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: '#FE533C30',
                                },
                                {
                                    offset: 0.6,
                                    color: '#FE533C20',
                                },
                                {
                                    offset: 1,
                                    color: '#ffba0010',
                                },
                            ],
                            false
                        ),
                    },
                },
                data: dataValue1,
            }
        ]
    }
    myChart.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

/* 计划进度 */
function initEchartsTwo(value2, value) {
    let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
    let kg = 0.3
    // 计划进度、实际进度
    let total = value2;
    let total_add = value;
    // 进度条占比
    let ljdata = total_add > total ? total : total_add;
    let newdata = total_add > total ? (total_add - total).toFixed(2) : (total - total_add).toFixed(2);
    let str = total_add < total ? '实际进度' + '' + `${total_add}` + '%' : '计划进度' + '' + `${total}` + '%';
    let str2 = total_add > total ? '实际进度' + '' + `${total_add}` + '%' : '计划进度' + '' + `${total}` + '%';
    if (total === total_add) {
        str2 = '实际进度' + '' + `${total_add}` + '%';
        str = '计划进度' + '' + `${total}` + '%';
    }
    let max = 101;
    var option = {
        backgroundColor: 'transparent',
        yAxis: {
            type: 'category',
            axisLine: {
                show: false, //坐标线
            },
            axisTick: {
                show: false, //小横线
            },
            axisLabel: {
                show: false, //小横线
                color: '#999', //坐标轴字颜色
            },
        },

        xAxis: {
            show: false,
            max: max,
        },
        grid: {
            top: '20',
            right: '50',
            left: '50',
            bottom: '0', //图表尺寸大小
        },
        animationDuration: 2000,
        series: [
            // 框
            {
                name: '框',
                type: 'bar',
                barGap: '-100%',
                data: [max],
                barWidth: '30px',
                itemStyle: {
                    normal: {
                        color: 'none',
                        borderColor: '#06DDDBFF',
                        borderWidth: 1,
                        barBorderRadius: 0,
                    },
                },

            },
            // 间隔
            {
                type: 'bar',
                barWidth: '25px',
                barGap: '-92%',
                stack: 'total',
                showBackground: false,
                backgroundStyle: {
                    color: 'transparent',
                },
                label: {
                    normal: {
                        show: false,
                    },
                },
                itemStyle: {
                    normal: {
                        color: 'transparent', //每个数据的颜色
                    },
                },
                data: [kg],
            },
            {
                type: 'bar',
                barWidth: '25px',
                barGap: '-92%',
                stack: 'total',
                showBackground: false,
                backgroundStyle: {
                    color: 'transparent',
                },
                label: {
                    normal: {
                        show: true,
                        position: 'insideBottomRight',
                        formatter: str,
                        // formatter: '计划进度' + ' ' + `${total}` + '%',
                        // formatter: total_add < total ? '实际进度' + ' ' + `${total_add}` + '%' : '计划进度' + ' ' + `${total}` + '%',
                        distance: 0,
                        offset: parseInt(total) === 100 ? [30, 35] :[60, 35],
                        color: fontColor,
                        fontSize: 12,
                        padding: [12, 12, 12, 12],
                    },
                },
                itemStyle: {
                    color: {
                        x: 1,
                        y: 0,
                        x2: 0,
                        y2: 0,
                        colorStops: [{
                            offset: 0,
                            color: '#03FDBAFF' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#A8FBE7FF' // 100% 处的颜色
                        }],
                    },
                },
                data: [ljdata],
            },
            {
                type: 'bar',
                barWidth: '25px',
                stack: 'total',
                silent: true,
                showBackground: false,
                backgroundStyle: {
                    color: 'transparent',
                },
                label: {
                    normal: {
                        show: true,
                        position: 'insideBottomRight',
                        // formatter: total_add > total ? '实际进度' + ' ' + `${total_add}` + '%' : '计划进度' + ' ' + `${total}` + '%',
                        formatter: str2,
                        distance: 0,
                        offset:parseInt(total_add) === 100 ? [30, -21] :[60, -21],
                        // offset: [50, -21],
                        color: fontColor,
                        fontSize: 12,
                        padding: [12, 12, 12, 12],
                    },
                },
                itemStyle: {
                    color: {
                        x: 1,
                        y: 0,
                        x2: 0,
                        y2: 0,
                        colorStops: [{
                            offset: 0,
                            color: '#FD9B02FF' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#FFE0B0FF' // 100% 处的颜色
                        }],
                    },
                },
                data: [newdata],
            },
            {
                type: 'bar',
                barWidth: '25px',
                stack: 'total',
                silent: true,
                showBackground: false,
                backgroundStyle: {
                    color: 'transparent',
                },
                label: {
                },
                itemStyle: {
                    normal: {
                        color: 'transparent', //每个数据的颜色
                    },
                },
                data: [kg],
            },
        ],
    };

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

/* 项目成本 */
function initEchartsThree(nameListData,valueListData,proCost) {
    let nameList = nameListData;
    let valueList = valueListData;
    let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
    const tooltip = {
        show: true,
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
        backgroundColor: 'rgba(75, 79, 82, 0.80)', //设置背景颜色
        textStyle: {
            color: fontColor,
            fontFamily: fontFamily
        },
        borderColor: "rgba(255,255,255, .5)",
    };
    option = {
        backgroundColor: 'transparent',
        tooltip,
        grid: {
            left: '10%',
            right: '6%',
            bottom: '15%',
            top: '25%',
        },
        xAxis: {
            type: 'category',
            data: nameList,

            axisLine: {
                show: true,
                lineStyle: {
                    color: '#FFFFFF66',
                    // width: 1
                },
            },
            axisLabel: {
                interval: 0,
                //  rotate: 50,
                textStyle: {
                    color: fontColor,
                    fontSize: fontSize,
                    fontFamily: fontFamily
                },
            },
            axisTick: {
                show: false,
            },
        },
        yAxis: {
            type: 'value',
            // min: 0,
            // max: proCost + 10000,
            splitLine: { //分割线配置
                lineStyle: {
                    color: "#25393B",
                    //  type: 'dashed'
                }
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#758FA6'
                }
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                textStyle: {
                    color: fontColor,
                    fontSize: fontSize,
                    fontFamily: fontFamily
                },
            },
        },
        series: [{
            barWidth: 14,
            data: valueList,
            type: 'bar',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#C9FFFAFF' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#0AFFBFFF' // 100% 处的颜色
                    }], false),
                    //  barBorderRadius: [30, 30, 30, 30],
                    shadowColor: 'rgba(0,160,221,1)',
                    shadowBlur: 4,
                    label: {
                        show: true, //开启显示
                        color: fontColor,
                        fontFamily: fontFamily,
                        position: 'top', //在上方显示
                        formatter: function (res) {
                            if (res.value) {
                                return res.value
                            } else {
                                return 0
                            }
                        },
                    },
                }
            },
            markLine: {
                symbol: 'none',
                label: {
                    position: "middle",
                    formatter: '{b}：{c}',
                    color: '#FF8845FF',
                    fontSize: fontSize
                },
                data: [{
                    silent: true,
                    name: "阈值",
                    yAxis: proCost,//res.targetTwo,
                    lineStyle: {
                        color: "#FF8845FF"
                    },
                }]
            }
        }]
    };
    myChart3.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart3.resize();
    });
}