let table, layer, form;
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';

layui.use(["layer", "table", "form"], function () {
    layer = layui.layer;
    table = layui.table;
    form = layui.form;

    getEnvironmental();

    getSafetyAlert();
});

function getEnvironmental() {
    let yList = [32, 58, 64, 164, 99];
    let xData = ['学前', '小学', '初中', '高中', 'qq'];
    initEnvironmental(yList, xData)
}

function initEnvironmental(yList, xData) {
    let barWidth = 60;
    let colors = []
    for (let i = 0; i < xData.length; i++) {
        colors.push({
            type: 'linear',
            x: 0,
            x2: 1,
            y: 0,
            y2: 0,
            colorStops: [
                {
                    offset: 0,
                    color: '#1CFFF4' // 最左边
                }, {
                    offset: 0.5,
                    color: '#1CFFF4' // 左边的右边 颜色
                }, {
                    offset: 0.5,
                    color: '#1CFFF4' // 右边的左边 颜色
                }, {
                    offset: 1,
                    color: '#1CFFF4'
                }]
        })
    }
    const myChart = echarts.init(document.getElementById("environmental"));
    const option = {
        //提示框
        tooltip: {
            trigger: 'axis',
            formatter: "{b} : {c}",
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        /**区域位置*/
        grid: {
            left: '8%',
            right: '3%',
            top: '30%',
            bottom: '30%',
        },
        //X轴
        xAxis: {
            data: xData,
            type: 'category',
            axisLine: {
                show: false,
                lineStyle: {
                    color: 'rgba(255,255,255,1)',
                    shadowColor: 'rgba(255,255,255,1)',
                    shadowOffsetX: '20',
                },
                symbol: ['none', 'arrow'],
                symbolOffset: [0, 25]
            },
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                margin: 30,
                fontSize: 15,
            },
        },
        yAxis: {
            show: true,
            splitNumber: 4,
            axisLine: {
                show: false,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: '#075858'
                },
            },
            axisLabel: {
                color: '#FFFFFF',
                margin: 8,
                fontSize: 15
            }
        },
        series: [
            {
                type: 'bar',
                barWidth: barWidth,
                itemStyle: {
                    normal: {
                        color: function (params) {
                            return colors[params.dataIndex % 7];
                        }
                    }
                },
                label: {
                    show: false,
                    position: [barWidth / 2, -(barWidth + 20)],
                    color: '#ffffff',
                    fontSize: 14,
                    fontStyle: 'bold',
                    align: 'center',
                },
                data: yList
            },
            {
                z: 2,
                type: 'pictorialBar',
                data: yList,
                symbol: 'diamond',
                symbolOffset: [0, '50%'],
                symbolSize: [barWidth, barWidth * 0.5],
                itemStyle: {
                    normal: {
                        color: function (params) {
                            return colors[params.dataIndex % 7];
                        },
                    }
                },
            },
            {
                z: 3,
                type: 'pictorialBar',
                symbolPosition: 'end',
                data: yList,
                symbol: 'diamond',
                symbolOffset: [0, '-50%'],
                symbolSize: [barWidth, barWidth * 0.5],
                itemStyle: {
                    normal: {
                        borderWidth: 0,
                        color: function (params) {
                            return colors[params.dataIndex % 7].colorStops[0].color;
                        },

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

function getSafetyAlert() {
    let yList = [32, 58, 64, 164, 99];
    let xData = ['学前', '小学', '初中', '高中', 'qq'];
    initSafetyAlert(yList, xData)
}

function initSafetyAlert(yList, xData) {
    let barWidth = 60;
    let colors = []
    for (let i = 0; i < xData.length; i++) {
        colors.push({
            type: 'linear',
            x: 0,
            x2: 1,
            y: 0,
            y2: 0,
            colorStops: [
                {
                    offset: 0,
                    color: '#1CFFF4' // 最左边
                }, {
                    offset: 0.5,
                    color: '#1CFFF4' // 左边的右边 颜色
                }, {
                    offset: 0.5,
                    color: '#1CFFF4' // 右边的左边 颜色
                }, {
                    offset: 1,
                    color: '#1CFFF4'
                }]
        })
    }
    const myChart = echarts.init(document.getElementById("safetyAlert"));
    const option = {
        //提示框
        tooltip: {
            trigger: 'axis',
            formatter: "{b} : {c}",
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        /**区域位置*/
        grid: {
            left: '8%',
            right: '3%',
            top: '30%',
            bottom: '30%',
        },
        //X轴
        xAxis: {
            data: xData,
            type: 'category',
            axisLine: {
                show: false,
                lineStyle: {
                    color: 'rgba(255,255,255,1)',
                    shadowColor: 'rgba(255,255,255,1)',
                    shadowOffsetX: '20',
                },
                symbol: ['none', 'arrow'],
                symbolOffset: [0, 25]
            },
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                margin: 30,
                fontSize: 15,
            },
        },
        yAxis: {
            show: true,
            splitNumber: 4,
            axisLine: {
                show: false,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: '#075858'
                },
            },
            axisLabel: {
                color: '#FFFFFF',
                margin: 8,
                fontSize: 15
            }
        },
        series: [
            {
                type: 'bar',
                barWidth: barWidth,
                itemStyle: {
                    normal: {
                        color: function (params) {
                            return colors[params.dataIndex % 7];
                        }
                    }
                },
                label: {
                    show: false,
                    position: [barWidth / 2, -(barWidth + 20)],
                    color: '#ffffff',
                    fontSize: 14,
                    fontStyle: 'bold',
                    align: 'center',
                },
                data: yList
            },
            {
                z: 2,
                type: 'pictorialBar',
                data: yList,
                symbol: 'diamond',
                symbolOffset: [0, '50%'],
                symbolSize: [barWidth, barWidth * 0.5],
                itemStyle: {
                    normal: {
                        color: function (params) {
                            return colors[params.dataIndex % 7];
                        },
                    }
                },
            },
            {
                z: 3,
                type: 'pictorialBar',
                symbolPosition: 'end',
                data: yList,
                symbol: 'diamond',
                symbolOffset: [0, '-50%'],
                symbolSize: [barWidth, barWidth * 0.5],
                itemStyle: {
                    normal: {
                        borderWidth: 0,
                        color: function (params) {
                            return colors[params.dataIndex % 7].colorStops[0].color;
                        },

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