264 lines
7.7 KiB
JavaScript
264 lines
7.7 KiB
JavaScript
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();
|
||
});
|
||
}
|