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(); }); }