236 lines
7.3 KiB
JavaScript
236 lines
7.3 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: '#currentDay',
|
||
btns: ['confirm']
|
||
}); */
|
||
laydate.render({
|
||
elem: '#currentDay', //指定元素 元素选择器
|
||
type: 'date', //选择时间类型 可选值:year(年) month(年月) date(年月日) time(时分秒) datetime(年月日时分秒)
|
||
trigger: 'click',
|
||
range: true,
|
||
format: 'yyyy-MM-dd', //时间格式 常用时间格式:yyyy-MM-dd HH:mm:ss
|
||
max: Date.parse(new Date()),
|
||
btns: ['now', 'confirm'], //选择框右下角显示的按钮 清除-现在-确定
|
||
});
|
||
// $('#currentDay').val(getNowTime());
|
||
const currentDate = new Date();
|
||
const thirtyDaysAgo = new Date();
|
||
thirtyDaysAgo.setDate(currentDate.getDate() - 30);
|
||
|
||
console.log('当前日期:', formatDate(currentDate));
|
||
console.log('30天前日期:', formatDate(thirtyDaysAgo));
|
||
$('#currentDay').val(formatDate(thirtyDaysAgo) + " - " + formatDate(currentDate));
|
||
form.render();
|
||
statisticalChart();
|
||
});
|
||
|
||
// 查询
|
||
function query() {
|
||
const startTime = $("#currentDay").val().split(' - ')[0],
|
||
endTime = $("#currentDay").val().split(' - ')[1];
|
||
let flag = isOver31Days(startTime, endTime);
|
||
if (flag) {
|
||
return layer.msg('查询的时间间隔不能超过30天', {icon: 2, time: 2000});
|
||
}
|
||
myChart12.dispose();
|
||
myChart12 = echarts.init(document.getElementById('echarts-one'));
|
||
statisticalChart();
|
||
}
|
||
|
||
function isOver31Days(dateStr1, dateStr2) {
|
||
// 将字符串日期转换为Date对象
|
||
const date1 = new Date(dateStr1);
|
||
const date2 = new Date(dateStr2);
|
||
|
||
// 计算两个日期的时间差（毫秒）
|
||
const timeDiff = Math.abs(date2.getTime() - date1.getTime());
|
||
|
||
// 将毫秒转换为天数（1天 = 24 * 60 * 60 * 1000毫秒）
|
||
const dayDiff = timeDiff / (1000 * 60 * 60 * 24);
|
||
|
||
// 判断是否超过31天
|
||
return dayDiff > 30;
|
||
}
|
||
|
||
// 领导动态
|
||
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();
|
||
});
|
||
}
|
||
|
||
function formatDate(date) {
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
return `${year}-${month}-${day}`;
|
||
}
|