const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100

// 随机数
const random = (val = 1) => {
    return Math.ceil(Math.random() * val)
}

// 水平圆角带背景柱状图
const horizontalRoundedBarChartWithBackground = function (data, id) {
    let charts = echarts.init(id);
    if (!data) {
        data = {
            yName: ["设备001", "设备001", "设备001", "设备001", "设备001"],
            xData: [53, 24, 66, 23, 100],
            xDataName: "达成率",
        }
    }
    let backGround = []
    data.xData.forEach(() => {
        backGround.push(100)
    })
    let option = {
        grid: {
            left: "0%",
            right: "12%",
            bottom: "0%",
            top: "0%",
            containLabel: true,
        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "none",
            },
            textStyle: {
                fontSize: 0.8 * vw
            },
            formatter: function (params) {
                return (
                    params[0].name +
                    "<br/>" +
                    "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
                    params[0].seriesName +
                    " : " + params[0].value + '%'
                );
            },
        },
        dataZoom: [],
        xAxis: {
            show: false,
            type: "value",
        },
        yAxis: [
            {
                type: "category",
                inverse: true,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#fff",
                        fontSize: 0.75 * vw
                    },
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                data: data.yName,
            }
        ],
        series: [
            {
                name: data.xDataName,
                type: "bar",
                zlevel: 1,
                itemStyle: {
                    normal: {
                        barBorderRadius: 30,
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {
                                offset: 0,
                                color: "rgb(57,89,255,1)",
                            },
                            {
                                offset: 1,
                                color: "rgb(46,200,207,1)",
                            },
                        ]),
                    },
                },
                barWidth: vw,
                data: data.xData,
                label: {
                    show: true,
                    position: "right",
                    textStyle: {
                        color: "#fff",
                        fontSize: 0.75 * vw
                    },
                    formatter: '{c}%'
                },
            },
            {
                name: "背景",
                type: "bar",
                barWidth: vw,
                barGap: "-100%",
                data: backGround,
                itemStyle: {
                    normal: {
                        color: "rgba(24,31,68,1)",
                        barBorderRadius: 30,
                    },
                },
            },
        ],
    };
    // if (data.xData?.length >= 3) {
    //     option.dataZoom.push({
    //         show: true,
    //         type: 'slider',
    //         yAxisIndex: 0,
    //         width: 0.75 * vw,
    //         start: 0,
    //         end: 1 / (data.xData.length / 4) * 100,
    //         textStyle: {
    //             fontSize: 0,
    //             color: 'rgba(0,0,0,0)'
    //         }
    //     })
    // }
    charts.setOption(option);
    $(window).resize(charts.resize);
}
const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
    let charts = echarts.init(id);
    if (!data) {
        data = {
            yNameOne: ["设备001", "设备001", "设备001", "设备001", "设备001", "设备001", "设备001", "设备001", "设备001"],
            yData: [41, 99, 32, 41, 24,4,16,64,18],
            xDataName: "达成率",
        }
    }
    let myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
    let bgBar = []
    data.yData.forEach(() => {
        bgBar.push(100)
    })
    let option = {
        grid: {
            left: "0%",
            right: "12%",
            bottom: "0%",
            top: "0%",
            containLabel: true,
        },
        xAxis: {
            show: false,
        },
        yAxis: [
            {
                show: true,
                data: data.yNameOne,
                inverse: true,
                axisLine: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    color: "#fff",
                },
            },
            {
                show: true,
                inverse: true,
                data: data.yData,
                axisLabel: {
                    textStyle: {
                        fontSize: 12,
                        color: "#fff",

                    },
                    formatter: '{value}%'
                },
                axisLine: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: "条",
                type: "bar",
                yAxisIndex: 0,
                data: data.yData,
                barWidth: vw,
                itemStyle: {
                    normal: {
                        barBorderRadius: 30,
                        color: function (params) {
                            var num = myColor.length;
                            return myColor[params.dataIndex % num];
                        },
                    },
                },
            },
            {
                name: "框",
                type: "bar",
                yAxisIndex: 1,
                barGap: "-100%",
                data: bgBar,
                barWidth: 1.2 * vw,
                itemStyle: {
                    normal: {
                        color: "none",
                        borderColor: "#00c1de",
                        borderWidth: 1,
                        barBorderRadius: 15,
                    },
                },
            },
        ],
    };

    // if (data.xData?.length >= 3) {
    //     option.dataZoom.push({
    //         show: true,
    //         type: 'slider',
    //         yAxisIndex: 0,
    //         width: 0.75 * vw,
    //         start: 0,
    //         end: 1 / (data.xData.length / 4) * 100,
    //         textStyle: {
    //             fontSize: 0,
    //             color: 'rgba(0,0,0,0)'
    //         }
    //     })
    // }
    charts.setOption(option);
    $(window).resize(charts.resize);
}

// 柱状+折线图
const barChartAndLineChart = function (data, id) {
    let charts = echarts.init(id);
    if (!data) {
        data = {
            xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
            yDataOne: [200, 382, 102, 267, 186, 315, 316],
            yDataOneName: "成品数量",
            yDataTwo: [382, 102, 186, 200, 102, 186, 315],
            yDataTwoName: "成品数量",
        }
    }
    let option = {
        tooltip: {
            textStyle: {
                fontSize: 0.8 * vw
            }
        },
        grid: {
            top: "15%",
            left: "1%",
            right: "1%",
            bottom: "8%",
            containLabel: true,
        },
        legend: {
            show: false,
            itemGap: 50,
            data: ["注册总量", "最新注册量"],
            textStyle: {
                color: "#f9f9f9",
                borderColor: "#fff",
            },
        },
        dataZoom: [],
        xAxis: [
            {
                type: "category",
                boundaryGap: true,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#fff',
                        opacity: 0.3,
                    },
                },
                axisLabel: {
                    //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: "#d1e6eb",
                        margin: 15,
                        fontSize: 0.75 * vw
                    },
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: '#777777',
                        opacity: 0.3,
                    },
                },
                data: data.xName,
            },
        ],
        yAxis: [
            {
                type: "value",
                min: 0,
                // max: 140,
                splitNumber: 7,
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: '#777777',
                        opacity: 0.3,
                    },
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#fff',
                        opacity: 0.3,
                    },
                },
                axisLabel: {
                    margin: 20,
                    textStyle: {
                        color: "#d1e6eb",
                        fontSize: 0.75 * vw
                    },
                },
                axisTick: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: data.yDataOneName || '',
                type: "line",
                // smooth: true, //是否平滑曲线显示
                // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
                showAllSymbol: true,
                symbol: "emptyCircle",
                symbolSize: 6,
                lineStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {
                                offset: 0,
                                color: "#8fb9d7",
                            },
                            {
                                offset: 1,
                                color: "#0F59E6",
                            },
                        ]),
                    },
                    borderColor: "#f0f",
                },
                label: {
                    show: true,
                    position: "top",
                    textStyle: {
                        color: "#fff",
                        fontSize: 0.75 * vw
                    },
                },
                itemStyle: {
                    normal: {
                        color: "#A5DBF3",
                    },
                },
                tooltip: {
                    show: false
                },
                areaStyle: {
                    //区域填充样式
                    normal: {
                        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(12,120,249,0.4)",
                                },
                                {
                                    offset: 1,
                                    color: "rgba(0,0,0, 0)",
                                },
                            ],
                            false
                        ),
                        shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                        shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                    },
                },
                data: data.yDataOne || [],
            },
            {
                name: data.yDataTwoName,
                type: "bar",
                barWidth: vw,
                label: {
                    show: true,
                    position: "top",
                    textStyle: {
                        color: "#fff",
                    },
                },
                itemStyle: {
                    normal: {
                        barBorderRadius: 5,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: "#0CAFF6",
                            },
                            {
                                offset: 1,
                                color: "#0F59E6",
                            },
                        ]),
                    },
                },
                data: data.yDataTwo,
            },
        ],
    };

    charts.setOption(option);
    $(window).resize(charts.resize);
}
const barChartAndLineChartTwo = function (data, id) {
    let charts = echarts.init(id);
    if (!data) {
        data = {
            xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
            yDataOne: [61, 25, 57, 83, 87, 73, 17,25, 57, 83, 87, 73],
            yDataOneName: "百分比",
            yDataTwo: [382, 102, 186, 200, 102, 186, 315,255, 527, 837, 587, 173],
            yDataTwoName: "成品数量",
        }
    }
    let option = {
        grid: {
            top: "15%",
            left: "1%",
            right: "1%",
            bottom: "2%",
            containLabel: true,
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999',
                },
                label:{
                    fontSize:0.5*vw,
                }
            },
            textStyle:{
                fontSize:0.5*vw,
            }
        },
        legend: {
            data: [data.yDataOneName, data.yDataTwoName],
            textStyle: {
                color: "#d1e6eb",
                margin: 15,
                fontSize: 0.75 * vw
            },
        },
        xAxis: [
            {
                axisLabel: {
                    //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: "#d1e6eb",
                        margin: 15,
                        fontSize: 0.75 * vw
                    },
                },
                type: 'category',
                data:data.xName,
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,0.1)",
                    },
                },
                axisLabel: {
                        //坐标轴刻度标签的相关设置
                        textStyle: {
                            color: "#d1e6eb",
                            margin: 15,
                            fontSize: 0.75 * vw
                        },
                    formatter: '{value} %'
                }
            },
            {
                type: 'value',
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: "#d1e6eb",
                        margin: 15,
                        fontSize: 0.75 * vw
                    },
                    formatter: '{value} '
                }
            }
        ],
        series: [
            {
                name: data.yDataOneName,
                type: 'bar',
                data: data.yDataOne,
                label: {
                    show: true,
                    position: ['10%', `50%`],
                    textStyle: {
                        color: "rgba(255,255,255,0.5)",
                        fontSize: 0.75 * vw
                    },
                },
                itemStyle: {
                    normal: {
                        color: '#0BB5FB',
                    },
                },
            },
            {
                name: data.yDataTwoName,
                type: 'line',
                yAxisIndex: 1,
                data: data.yDataTwo,
                itemStyle: {
                    normal: {
                        color: '#0DB99D',
                    },
                },
            }
        ]
    };

    charts.setOption(option);
    $(window).resize(charts.resize);
}

// 饼图
const pieChart = function (data, id) {
    let charts = echarts.init(id);
    if (!data) {
        data = [
            {
                value: 285,
                name: "类型1",
            },
            {
                value: 410,
                name: "类型2",
            },
            {
                value: 274,
                name: "类型3",
            },
            {
                value: 235,
                name: "类型4",
            },
        ]
    }
    let option = {
        tooltip: {
            trigger: "item",
            formatter: "{b} : {c} ({d}%)",
            textStyle: {
                fontSize: 0.8 * vw
            }
        },

        series: [
            {
                name: "访问来源",
                type: "pie",
                radius: "90%",
                center: ["50%", "50%"],
                color: ["rgb(131,249,103)", "#FBFE27", "#FE5050", "#1DB7E5"], //'#FBFE27','rgb(11,228,96)','#FE5050'
                data: data.sort(function (a, b) {
                    return a.value - b.value;
                }),
                roseType: "radius",
                label: {
                    normal: {
                        formatter: "{b|{b}} {c|{c}次}",
                        rich: {
                            c: {
                                color: "rgb(241,246,104)",
                                fontSize: 0.75 * vw,
                                lineHeight: 5,
                            },
                            b: {
                                color: "rgb(98,137,169)",
                                fontSize: 0.75 * vw,
                                height: 1.5 * vw,
                            },
                        },
                    },
                },
                emphasis: {
                    label: {
                        fontSize: 0.75 * vw
                    }
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: "rgb(98,137,169)",
                        },
                        smooth: true,
                        length: 0,
                        length2: 10,
                    },
                },
            },
        ],
    };

    charts.setOption(option);
    $(window).resize(charts.resize);
}

// 垂直柱状图
const verticalBarChart = function (data, id) {
    let charts = echarts.init(id);
    if (!data) {
        data = [
            {
                value: 285,
                name: "类型1",
            },
            {
                value: 410,
                name: "类型2",
            },
            {
                value: 274,
                name: "类型3",
            },
            {
                value: 235,
                name: "类型4",
            },
        ]
    }
    let option = {
        tooltip: {
            textStyle: {
                fontSize: 0.8 * vw
            }
        },
        grid: {
            top: "5%",
            left: "1%",
            right: "1%",
            bottom: "1%",
            containLabel: true,
        },
        xAxis: {
            data: [
                ">10分钟",
                "3-10分钟",
                "0-3分钟",
            ],
            axisLine: {
                lineStyle: {
                    color: "#0177d4",
                },
            },
            axisLabel: {
                color: "#fff",
                fontSize: 0.8 * vw,
                interval: 0,
            },
        },
        yAxis: {
            nameTextStyle: {
                color: "#fff",
                fontSize: 0.8 * vw,
            },
            axisLine: {
                lineStyle: {
                    color: "#0177d4",
                },
            },
            axisLabel: {
                color: "#fff",
                fontSize: 0.8 * vw,
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: "#0177d4",
                },
            },
        },
        series: [
            {
                type: "bar",
                barWidth: vw,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "#00b0ff",
                                },
                                {
                                    offset: 0.8,
                                    color: "#7052f4",
                                },
                            ],
                            false
                        ),
                    },
                },
                data: [254, 3254, 1654],
            },
        ],
    };

    charts.setOption(option);
    $(window).resize(charts.resize);

}

// 多个垂直柱状图
const multipleVerticalBarChart = function (data, id) {
    let charts = echarts.init(id);
    if (!data) {
        data = {
            xName: [
                "7:00",
                "8:00",
                "9:00",
                "10:00",
                "11:00",
                "12:00",
            ],
            yDataOne: [4.9, 7.3, 9.2, 5.6, 7.7, 5.6],
            yDataOneName: "制氢",
            yDataTwo: [2.9, 5, 4.4, 2.7, 5.7, 4.6],
            yDataTwoName: "发电",
            yDataThree: [3.9, 6, 5.4, 3.7, 6.7, 5.6],
            yDataThreeName: "充装",
        }
    }
    let option = {
        tooltip: {
            //提示框组件
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    lineStyle: {
                        color: "#57617B",
                    },
                },
            },
            // trigger: "axis",
            // formatter: `{b}<br />{a0}: {c0}<br />{a1}: {c1}`,
            // axisPointer: {
            //     type: "shadow",
            //     label: {
            //         backgroundColor: "#6a7985",
            //     },
            // },
            // textStyle: {
            //     color: "#fff",
            //     fontStyle: "normal",
            //     fontFamily: "微软雅黑",
            //     fontSize: 12,
            // },
        },
        grid: {
            left: "1%",
            right: "4%",
            bottom: "0",
            top: 30,
            padding: "0 0 10 0",
            containLabel: true,
        },
        legend: {
            //图例组件，颜色和名字
            right: 10,
            top: 0,
            itemGap: 16,
            itemWidth: vw,
            itemHeight: 0.6 * vw,
            textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 0.75 * vw,
            },
        },
        dataZoom: [],
        xAxis: [
            {
                type: "category",
                boundaryGap: true, //坐标轴两边留白
                data: data.xName,
                axisLabel: {
                    show: true,
                    color: '#fff'
                },
                axisTick: {
                    //坐标轴刻度相关设置。
                    show: false,
                },
                axisLine: {
                    //坐标轴轴线相关设置
                    lineStyle: {
                        color: "#fff",
                        opacity: 0.2,
                    },
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: '#777777',
                        opacity: 0.3,
                    },
                },
            },
        ],
        yAxis: {
            type: "value",
            splitNumber: 5,
            max: Math.max(...data.yDataOne, ...data.yDataTwo) + 5,
            axisLabel: {
                show: true,
                color: '#fff'
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: '#777777',
                    opacity: 0.3,
                },
            },
        },
        series: [
            {
                name: data.yDataOneName,
                type: "bar",
                data: data.yDataOne,
                barWidth: 1 * vw,
                barGap: 0, //柱间距离
                label: {
                    //图形上的文本标签
                    normal: {
                        show: true,
                        position: "top",
                        textStyle: {
                            color: "#a8aab0",
                            fontStyle: "normal",
                            fontFamily: "微软雅黑",
                            fontSize: 0.75 * vw,
                        },
                    },
                },
                itemStyle: {
                    //图形样式
                    normal: {
                        barBorderRadius: [5, 5, 0, 0],
                        color: {
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            type: 'linear',
                            global: false,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgb(21, 148, 244)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(13, 48, 243)',
                                },
                            ],
                        },
                    },
                },
            },
            {
                name: data.yDataTwoName,
                type: "bar",
                data: data.yDataTwo,
                barWidth: 1 * vw,
                barGap: 0.5, //柱间距离
                label: {
                    //图形上的文本标签
                    normal: {
                        show: true,
                        position: "top",
                        textStyle: {
                            color: "#a8aab0",
                            fontStyle: "normal",
                            fontFamily: "微软雅黑",
                            fontSize: 0.75 * vw,
                        },
                    },
                },
                itemStyle: {
                    //图形样式
                    normal: {
                        barBorderRadius: [5, 5, 0, 0],
                        color: {
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            type: 'linear',
                            global: false,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#0DCEB1',
                                },
                                {
                                    offset: 1,
                                    color: '#14A15A',
                                },
                            ],
                        },
                    },
                },
            },
            {
                name: data.yDataThreeName,
                type: "bar",
                data: data.yDataThree,
                barWidth: 1 * vw,
                barGap: 0.5, //柱间距离
                label: {
                    //图形上的文本标签
                    normal: {
                        show: true,
                        position: "top",
                        textStyle: {
                            color: "#a8aab0",
                            fontStyle: "normal",
                            fontFamily: "微软雅黑",
                            fontSize: 0.75 * vw,
                        },
                    },
                },
                itemStyle: {
                    //图形样式
                    normal: {
                        barBorderRadius: [5, 5, 0, 0],
                        color: "rgba(26, 99, 74, 0.7)",
                    },
                },
            },
        ],
    };

    if (data?.xName?.length >= 4) {
        option.dataZoom.push({
            show: true,
            type: 'slider',
            bottom: '0%',
            xAxisIndex: 0,
            height: 12,
            start: 0,
            end: 1 / (data.xName.length / 4) * 100,
            textStyle: {
                fontSize: 0,
                color: 'rgba(0,0,0,0)'
            }
        })
        option.grid.bottom = '7%'
    }
    charts.setOption(option);
    $(window).resize(charts.resize);
}
const multipleVerticalBarChartTwo = function (data, id) {
    let charts = echarts.init(id);
    if (!data) {
        data = {
            xName: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
            yDataOne: [22, 52, 55, 12, 35, 44, 66],
            yDataOneName: 'a1',
            yDataTwo: [32, 42, 50, 22, 30, 40, 52],
            yDataTwoName: "a2",
        }
    }
    let option = {
        grid: {
            top: "20%",
            left: "1%",
            right: "1%",
            bottom: "1%",
            containLabel: true,
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: [data.yDataOneName, data.yDataTwoName],
            textStyle: {
                fontSize: 0.75 * vw,
                color: "#F1F1F3",
            },
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {show: false},
                axisLabel: {
                    textStyle: {
                        fontSize: 0.75 * vw,
                        color: "#F1F1F3",
                    },
                },
                data: data.xName
            }
        ],
        yAxis: [
            {
                axisLabel: {
                    textStyle: {
                        fontSize: 0.75 * vw,
                        color: "#F1F1F3",
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,0.1)",
                    },
                },
                type: 'value'
            }
        ],
        series: [
            {
                name: data.yDataOneName,
                type: 'bar',
                barGap: 0,
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    //图形样式
                    normal: {
                        color: "#1FEDCA",
                    },
                },
                label: {
                    show: true,
                    position: "top",
                    textStyle: {
                        color: "rgba(255,255,255,0.5)",
                        fontSize: 0.75 * vw
                    },
                },
                data: data.yDataOne
            },
            {
                name: data.yDataTwoName,
                type: 'bar',
                emphasis: {
                    focus: 'series'
                },
                label: {
                    show: true,
                    position: "top",
                    textStyle: {
                        color: "rgba(255,255,255,0.5)",
                        fontSize: 0.75 * vw
                    },
                },
                itemStyle: {
                    //图形样式
                    normal: {
                        color: "#E65454",
                    },
                },
                data: data.yDataTwo
            },
        ]
    };

    if (data?.length >= 3) {
        option.dataZoom.push({
            show: true,
            type: 'slider',
            xAxisIndex: 0,
            width: 12,
            start: 0,
            end: 1 / (data.length / 3) * 100,
            textStyle: {
                fontSize: 0,
            }
        })
    }
    charts.setOption(option);
    $(window).resize(charts.resize);
}

// 单个垂直柱状图
const singleVerticalBarChart = function (data, id) {
    let charts = echarts.init(id);
    if (!data) {
        data = {
            xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
            yData: [12, 20, 11, 30, 14, 80, 50],
        }
    }
    let left = () => {
        if (vw < 10) return '18%'
        return '10%'
    }
    let option = {
        grid: {
            top: "10%",
            left: left(),
            right: "5%",
            bottom: "25%",
            // containLabel: true
        },
        dataZoom: [],
        xAxis: {
            data: data.xName,
            axisLine: {
                lineStyle: {
                    color: "#0177d4",
                },
            },
            axisLabel: {
                color: "#fff",
                fontSize: 14,
            },
        },
        yAxis: {
            nameTextStyle: {
                color: "#fff",
                fontSize: 16,
            },
            axisLine: {
                lineStyle: {
                    color: "#0177d4",
                },
            },
            axisLabel: {
                color: "#fff",
                fontSize: 16,
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: "#0177d4",
                },
            },
        },
        series: [
            {
                type: "bar",
                barWidth: 1 * vw,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "#00b0ff",
                                },
                                {
                                    offset: 0.8,
                                    color: "#7052f4",
                                },
                            ],
                            false
                        ),
                    },
                },
                data: data.yData,
            },
        ],
    };


    charts.setOption(option);
    $(window).resize(charts.resize);
}
const singleVerticalBarChartTwo = function (data, id) {
    let charts = echarts.init(id);
    if (!data) {
        data = {
            xName: ['0时', '2时', '4时', '6时', '8时', '10时', '12时', '14时'],
            yData: [38, 60, 40, 55, 42, 39, 45, 40],
        }
    }
    let option = {
        backgroundColor: 'rgba(0,0,0,0)',
        color: ['#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe'],
        grid: {
            top: "20%",
            bottom: "15%",
            right: "5%"
        },
        xAxis: {
            nameTextStyle: {
                color: '#c0c3cd',
                padding: [0, 0, -10, 0],
                fontSize: 14,
            },
            axisLabel: {
                color: '#c0c3cd', //X轴文字
                fontSize: 14,
                interval: 0,
            },
            axisTick: {
                lineStyle: {
                    color: '#0B1535',
                    width: 1,
                },
                show: false,
            },
            splitLine: {
                show: false,
            },
            axisLine: {
                lineStyle: {
                    color: '#384267',
                    width: 1,
                    type: 'dashed',
                },
                show: true,
            },
            data: data.xName,
            type: 'category',
        },
        yAxis: {
            type: 'value',
            nameTextStyle: {
                color: '#c0c3cd',
                padding: [0, 0, -10, 0],
                fontSize: 14,
            },
            axisLabel: {
                color: '#c0c3cd', //Y轴文字
                fontSize: 14,
            },
            axisTick: {
                lineStyle: {
                    color: '#384267',
                    width: 1,
                },
                show: true,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#384267',
                    type: 'line',
                },
            },
            axisLine: {
                lineStyle: {
                    color: '#fff',
                    width: 1,
                    type: 'line',
                },
                show: false,
            },
        },
        series: [
            {
                data: data.yData,
                type: 'bar',
                barMaxWidth: 'auto',
                barWidth: 1.5 * vw,

                label: {
                    show: true,
                    position: 'top',
                    // distance: 10,
                    color: '#fff',
                    formatter: '{a|}',
                    rich: {
                        a: {
                            width: 3 * vw,
                            height: 3 * vw,
                            backgroundColor: {
                                image: '../../img/board/intelligentRefrigeratorInterconnectionFactory/btnOneClick.png'
                            },
                        },
                    }
                },
            },
            {
                data: data.yData,
                type: 'pictorialBar',
                barMaxWidth: vw,
                symbolPosition: 'end',
                symbol: 'diamond',
                color: '#66c8ff',
                symbolOffset: [0 + '%', '-50%'],
                symbolSize: [1.5 * vw, 10],
                zlevel: 4,
            },
            {
                data: [1, 1, 1, 1, 1, 1, 1, 1],
                type: 'pictorialBar',
                barMaxWidth: vw,
                symbolPosition: 'end',
                symbol: 'diamond',
                color: '#66c8ff',
                symbolOffset: [0 + '%', '-20%'],
                symbolSize: [1.5 * vw, 10],
                zlevel: 4,
            }],
    };


    charts.setOption(option);
    $(window).resize(charts.resize);
}

// 多个折线面积图(直线)
const multipleBrokenLineAreaDiagram = (data, ids) => {
    let charts = echarts.init(ids);

    function Fun() {
        this.randomNum = function () {
            let arr = []
            for (let i = 0; i < 12; i++) {
                arr.push(parseInt(Math.random() * 100))
            }
            return arr
        }
    }

    if (!data) {
        data = {
            xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            yDataOne: new Fun().randomNum(),
            yDataTwo: new Fun().randomNum(),
            yDataThree: new Fun().randomNum(),
            yDataOneName: '制氢量',
            yDataTwoName: '发电量',
            yDataThreeName: '充装量',
        }
    }

    let option = {
        tooltip: {
            trigger: "axis",
            axisPointer: {
                lineStyle: {
                    color: "#57617B",
                },
            },
        },
        legend: {
            icon: "rect",
            itemWidth: 0.75 * vw,
            itemHeight: 0.25 * vw,
            itemGap: 0.75 * vw,
            data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName],
            right: "4%",
            textStyle: {
                fontSize: 0.75 * vw,
                color: "#F1F1F3",
            },
        },
        grid: {
            top: "20%",
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
        },
        dataZoom: [],
        xAxis: [
            {
                type: "category",
                boundaryGap: false,
                axisLine: {
                    lineStyle: {
                        color: "#57617B",
                    },
                },
                axisLabel: {
                    show: true,
                    color: '#fff'
                },
                data: data.xData,
            },
        ],
        yAxis: [
            {
                type: "value",
                axisTick: {
                    show: false,
                },
                min:15,
                axisLine: {
                    lineStyle: {
                        color: "#57617B",
                    },
                },
                axisLabel: {
                    show: true,
                    color: '#fff'
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: "#57617B",
                    },
                },
            },
        ],
        series: [
            {
                name: data.yDataOneName,
                type: "line",
                smooth: false,
                lineStyle: {
                    normal: {
                        width: 1,
                    },
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(137, 189, 27, 0.6)",
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(137, 189, 27, 0.2)",
                                },
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)",
                        shadowBlur: 10,
                    },
                },
                itemStyle: {
                    normal: {
                        color: "rgb(137,189,27)",
                    },
                },
                label: {
                    //图形上的文本标签
                    normal: {
                        show: true,
                        position: "top",
                        textStyle: {
                            color: "#a8aab0",
                            fontStyle: "normal",
                            fontFamily: "微软雅黑",
                            fontSize: 0.75 * vw,
                        },
                    },
                },
                data: data.yDataOne,
            },
            {
                name: data.yDataTwoName,
                type: "line",
                smooth: false,
                lineStyle: {
                    normal: {
                        width: 1,
                    },
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(0, 136, 212, 0.6)",
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(0, 136, 212, 0.2)",
                                },
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)",
                        shadowBlur: 10,
                    },
                },
                itemStyle: {
                    normal: {
                        color: "rgb(0,136,212)",
                    },
                },
                label: {
                    //图形上的文本标签
                    normal: {
                        show: true,
                        position: "bottom",
                        textStyle: {
                            color: "#a8aab0",
                            fontStyle: "normal",
                            fontFamily: "微软雅黑",
                            fontSize: 0.75 * vw,
                        },
                    },
                },
                data: data.yDataTwo,
            },
            {
                name: data.yDataThreeName,
                type: "line",
                smooth: false,
                lineStyle: {
                    normal: {
                        width: 1,
                    },
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(219, 50, 51, 0.6)",
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(219, 50, 51, 0.2)",
                                },
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)",
                        shadowBlur: 10,
                    },
                },
                itemStyle: {
                    normal: {
                        color: "rgb(219,50,51)",
                    },
                },
                data: data.yDataThree,
            },
        ],
    };

    if (data?.xData?.length >= 4) {
        option.dataZoom.push({
            show: true,
            type: 'slider',
            bottom: '0%',
            xAxisIndex: 0,
            height: 12,
            start: 0,
            end: 1 / (data.xData.length / 4) * 100,
            textStyle: {
                fontSize: 0,
                color: 'rgba(0,0,0,0)'
            }
        })
        option.grid.bottom = '7%'
    }

    charts.setOption(option);
    $(window).resize(charts.resize);
}


// 空心饼图
const hollowPieChart = function (data, id) {
    let charts = echarts.init(id);
    if (!data) {
        data = [
            {
                value: 10,
                name: "IQC1",
            },
            {
                value: 5,
                name: "IQC2",
            },
            {
                value: 15,
                name: "IQC3",
            },
            {
                value: 25,
                name: "IQC4",
            },
            {
                value: 20,
                name: "IQC5",
            },
            {
                value: 35,
                name: "IQC6",
            },
        ]
    }
    let option = {
        color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
        grid: {
            left: '-10%',
            top: '10%',
            bottom: '10%',
            right: '10%',
            containLabel: true,
        },
        tooltip: {
            trigger: "item",
            formatter: "{b} : {c} ({d}%)",
        },
        polar: {},
        angleAxis: {
            interval: 1,
            type: "category",
            data: [],
            z: 10,
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: false,
            }
        },
        radiusAxis: {
            min: 40,
            max: 120,
            interval: 20,
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
            },
        },
        // calculable: true,
        series: [
            {
                stack: "a",
                type: "pie",
                radius: ["20%", "80%"],
                zlevel: 10,
                label: {
                    show: false
                },
                // roseType: "area",
                data: data,
            },
        ],
    };

    charts.setOption(option);
    $(window).resize(charts.resize);
}

// 多个环形图
const percentageRingDiagram = function (data, id) {
    let charts = echarts.init(id);
    if (!data) {
        data = [
            {
                name: "数据1",
                value: 54,
            },
            {
                name: "数据1",
                value: 44,
            },
            {
                name: "数据1",
                value: 35,
            },
            {
                name: "数据1",
                value: 30,
            },
            {
                name: "数据1",
                value: 44,
            },
            {
                name: "数据1",
                value: 35,
            },
            {
                name: "数据1",
                value: 30,
            },
        ];
    }

    let titleArr = [],
        seriesArr = [];
    let colors = [
        ["#389af4", "#dfeaff"],
        ["#ff8c37", "#ffdcc3"],
        ["#ffc257", "#ffedcc"],
        ["#fd6f97", "#fed4e0"],
        ["#a181fc", "#e3d9fe"],
        ["#389af4", "#dfeaff"],
        ["#ff8c37", "#ffdcc3"],
        ["#ffc257", "#ffedcc"],
        ["#fd6f97", "#fed4e0"],
    ];
    data.forEach(function (item, index) {
        titleArr.push({
            text: item.name,
            x: index > 3 ? (index - 4) * 25 + 10 + "%" : index * 25 + 10 + "%",
            y: index > 3 ? "90%" : "40%",
            // top: '65%',
            textAlign: "center",
            textStyle: {
                fontWeight: "normal",
                fontSize: 0.8*vw,
                color: colors[index][0],
                textAlign: "center",
            },
        });
        seriesArr.push({
            // name: item.name,
            type: "pie",
            clockWise: false,
            radius: [2*vw, 2.5*vw],
            itemStyle: {
                normal: {
                    color: colors[index][0],
                    shadowColor: colors[index][0],
                    shadowBlur: 0,
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false,
                    },
                },
            },
            hoverAnimation: false,
            center: [
                index > 3 ? (index - 4) * 25 + 10 + "%" : index * 25 + 10 + "%",
                index > 3 ? "75%" : "25%",
            ],
            data: [
                {
                    value: item.value,
                    label: {
                        normal: {
                            formatter: function (params) {
                                return params.value + "%";
                            },
                            position: "center",
                            show: true,
                            textStyle: {
                                fontSize: vw,
                                fontWeight: "bold",
                                color: colors[index][0],
                            },
                        },
                    },
                },
                {
                    value: 100 - item.value,
                    name: "invisible",
                    itemStyle: {
                        normal: {
                            color: colors[index][1],
                        },
                        emphasis: {
                            color: colors[index][1],
                        },
                    },
                },
            ],
        });
    });

    let option = {
        title: titleArr,
        series: seriesArr,
    };


    charts.setOption(option);
    $(window).resize(charts.resize);
}