cc-jjsp-web/bns/js/dutyTask/violation/collectiveUnit.js

let form, layer, laydate;
let user = getUser();
let myChart12 = echarts.init(document.getElementById('echarts-one'));

layui.use(['form', 'layer', 'laydate'], function () {
    layer = layui.layer;
    form = layui.form;
    laydate = layui.laydate;
    laydate.render({
        elem: '#ID-laydate-rangeLinked',
        range: ['#startDay', '#endDay'],
        rangeLinked: true,
        btns: ['confirm']
    });
    $('#startDay').val(getNowTime());
    $('#endDay').val(getNowTime());
    form.render();
    statisticalChart();
});

// 查询
function query() {
    myChart12.dispose();
    myChart12 = echarts.init(document.getElementById('echarts-one'));
    statisticalChart();
}

// 集体企业
function statisticalChart() {
    let param = {
        workDay:$('#startDay').val() + ' - ' + $('#endDay').val(),
        currentUserId: user.userId + '',
        isSup: user.isSup,
        currentUserOrgId: user.orgId
    };
    $.ajax({
        headers: {
            "encrypt": sm3(JSON.stringify(param))
        },
        url: dataUrl + 'proteam/pot/todayTask/statisticalChart?token=' + token,
        data: param,
        type: 'POST',
        async: true,
        success: function (result) {
            if (result.code === 200) {
                initEchartsOne(result.data);
            } else if (result.code === 401) {
                logout(1)
            }
        }, error: function () {
        }
    });
}

/*按违章等级统计-echarts*/
function initEchartsOne(list) {
    console.error(list);
    let nameList = [],twoList = [],threeList = [],fourList = [];
    $.each(list,function(index,item){
        nameList.push(item.name);
        twoList.push(item.twoCount);
        threeList.push(item.threeCount);
        fourList.push(item.fourCount);
    });
    let fontSize = '12', fontFamily = 'Alibaba PuHuiTi R',fontColor = '#000';
    let option = {
        backgroundColor: 'transparent',
        tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            // backgroundColor: 'rgba(0, 0, 0, 0.63)', //设置背景颜色
            textStyle: {
                color: fontColor,
                fontFamily: fontFamily
            },
            // borderColor: "rgba(255,255,255, .5)",
        },
        legend: {
            icon: 'circle',
            data: ['二级', '三级','四级及五级'],
            right: 20,
            textStyle: {
                color: fontColor,
                fontSize: fontSize,
                fontFamily: fontFamily
            },
            itemWidth: 15,
            itemHeight: 15,
            itemGap: 35
        },
        grid: {
            left: '0%',
            right: '0%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: nameList,
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#063374",
                    width: 1,
                    type: "solid"
                }
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: true,
                interval: 0, // 强制显示所有标签
                textStyle: {
                    color: fontColor,
                    fontFamily: fontFamily,
                    fontSize: fontSize
                },
                // 核心换行配置
                formatter: function(params) {
                    // 自定义换行逻辑：超过5个字符换行（可根据需求调整）
                    const maxLength = 8;
                    if (params.length > maxLength) {
                        return params.substring(0, maxLength) + '\n' + params.substring(maxLength);
                    }
                    return params;
                },
                // 文本样式与宽度相关设置
                textStyle: {
                    color: fontColor,
                    fontFamily: fontFamily,
                    fontSize: fontSize,
                    // 允许文本换行
                    whiteSpace: 'normal',
                    // 文本容器宽度（控制每行显示长度）
                    width: 100
                },
                // 标签间距与对齐方式
                margin: 15, // 标签与轴的间距
                align: 'center'
            },
        }],
        yAxis: [{
            type: 'value',
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: fontColor,
                    width: 1,
                    type: "solid",
                },
            },
            splitLine: {
                lineStyle: {
                    color: '#063374',
                    type: 'dashed'
                }
            }
        }],
        series: [{
            name: '二级',
            type: 'bar',
            data: twoList,
            barWidth: 10, //柱子宽度
            barGap: 0.5, //柱子之间间距
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#FF5D5D'
                    }, {
                        offset: 1,
                        color: '#FF5D5D'
                    }]),
                    opacity: 1,
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    formatter: '{c}',
                    textStyle: {
                        color: fontColor,
                        fontSize: '14px',
                        fontFamily: fontFamily
                    }
                }
            },
        }, {
            name: '三级',
            type: 'bar',
            data: threeList,
            barWidth: 10,
            barGap: 0.5,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#F9770F'
                    }, {
                        offset: 1,
                        color: '#F9770F'
                    }]),
                    opacity: 1,
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    formatter: '{c}',
                    textStyle: {
                        color: fontColor,
                        fontSize: '14px',
                        fontFamily: fontFamily
                    }
                }
            },
        },
        {
            name: '四级及五级',
            type: 'bar',
            data: fourList,
            barWidth: 10,
            barGap: 0.5,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#2aa998'
                    }, {
                        offset: 1,
                        color: '#2aa998'
                    }]),
                    opacity: 1,
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    formatter: '{c}',
                    textStyle: {
                        color: fontColor,
                        fontSize: '14px',
                        fontFamily: fontFamily
                    }
                }
            },
        }]
    };
    myChart12.setOption(option, true);
    window.addEventListener("resize", function () {
        myChart12.resize();
    });
}