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: '#currentDay', btns: ['confirm'] }); $('#currentDay').val(getNowTime()); form.render(); statisticalChart(); }); // 查询 function query() { myChart12.dispose(); myChart12 = echarts.init(document.getElementById('echarts-one')); statisticalChart(); } // 领导动态 function statisticalChart() { let param = { currentDay:$('#currentDay').val(), }; $.ajax({ headers: { "encrypt": sm3(JSON.stringify(param)) }, url: dataUrl + 'proteam/pot/cityDailyDutyReport/getLeaderDynamicByEcharts?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(data) { console.error(data); let nameList = data.nameList,valueList = data.valueList; 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: valueList, 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 } } }, }] }; myChart12.setOption(option, true); window.addEventListener("resize", function () { myChart12.resize(); }); }