/**
|
* Crm数据图表
|
* Created by jiangyouyao on 2019/4/20.
|
*/
|
function ChartsUtils(loadChartData) {
|
|
//赋值加载数据方法
|
this.loadChartData = loadChartData;
|
this.$beginTime = $("#beginTime");
|
this.$endTime = $("#endTime");
|
this.$unitSelect = $("#unitSelect");
|
//记录当前视图的格式化字符串
|
this.dateFmt = "";
|
//绑定搜索事件
|
$('#serach').on("click",{charts:this},this.updateChartsDate);
|
//时间单位选择变化
|
this.$unitSelect.on("change",{charts:this},this.unitChange);
|
|
|
}
|
|
|
|
|
/**
|
* 设置时间控件格式
|
*/
|
ChartsUtils.prototype.setDataPackTimeValue = function () {
|
|
console.log("设置时间");
|
var unit = this.$unitSelect.val();
|
var startView, minView;
|
//控件赋值
|
var time = new Date();
|
if (unit == '时') {
|
startView = 1;
|
minView = "day";
|
this.dateFmt = "yyyy-MM-dd hh";
|
//时间视图默认显示当天
|
this.$endTime.val(DateFormat.format(DateFormat.getDateEnd(time), this.dateFmt));
|
this.$beginTime.val(DateFormat.format(DateFormat.getDateStart(time), this.dateFmt));
|
} else if (unit == '日') {
|
console.log(time.getDate());
|
startView = 2;
|
minView = "month";
|
this.dateFmt = "yyyy-MM-dd";
|
//日视图默认显示当月
|
this.$endTime.val(DateFormat.format(time, this.dateFmt));
|
this.$beginTime.val(DateFormat.format(DateFormat.addDay(time, -(time.getDate() - 1)), this.dateFmt));
|
|
} else if (unit == '月') {
|
startView = 3;
|
minView = "year";
|
this.dateFmt = "yyyy-MM";
|
//月视图默认显示当年
|
this.$endTime.val(DateFormat.format(time, this.dateFmt));
|
this.$beginTime.val(DateFormat.format(DateFormat.addMonth(time, -time.getMonth()), this.dateFmt));
|
} else if (unit == '年') {
|
startView = 4;
|
minView = "decade";
|
this.dateFmt = "yyyy";
|
//年视图默认显示5年
|
this.$endTime.val(DateFormat.format(time, this.dateFmt));
|
this.$beginTime.val(DateFormat.format(DateFormat.addYear(time, -5), this.dateFmt));
|
}
|
console.log("startView", startView);
|
//时间
|
var _initParam = {
|
format: this.dateFmt.toLowerCase(),
|
todayBtn: false,
|
autoclose: true,
|
startView: startView,
|
maxView: 4,
|
minView: minView
|
};
|
MTools.ininDatetimepicker(_initParam);
|
|
}
|
|
/**
|
* 校验时间范围
|
*/
|
ChartsUtils.prototype.checkTime = function () {
|
var beginTimeStr = this.$beginTime.val();
|
var endTimeStr = this.$endTime.val();
|
if (StringUtils.isNotEmpty(beginTimeStr) && StringUtils.isNotBlank(endTimeStr)) {
|
//字符串不为空
|
var beginTime = moment(beginTimeStr);
|
var endTime = moment(endTimeStr);
|
console.log(beginTime.unix(), endTime.unix());
|
if (beginTime.unix() <= endTime.unix()) {
|
return true;
|
} else {
|
layer.msg("最小日期不能大于最大日期", {icon: 2});
|
return false;
|
}
|
} else {
|
layer.msg("请选择日期范围", {icon: 2});
|
return false;
|
}
|
}
|
|
ChartsUtils.prototype.unitChange = function (event) {
|
//移除时间控件上的绑定时间
|
$("#beginTime").datetimepicker('remove');
|
$("#endTime").datetimepicker('remove');
|
//根据单位重设定查询条件，新绑定时间控件，
|
event.data.charts.setDataPackTimeValue();
|
event.data.charts.loadChartData();
|
}
|
|
|
/**
|
* 更新图表中的数据
|
*/
|
ChartsUtils.prototype.updateChartsDate=function(event){
|
if(event.data.charts.checkTime()){
|
event.data.charts.loadChartData();
|
}
|
}
|
|
/**
|
*指定图表的配置项和数据
|
*/
|
ChartsUtils.prototype.getption=function(title) {
|
return {
|
title: {
|
text: title,
|
padding: 20
|
},
|
legend: {},
|
toolbox: {
|
show: true,
|
feature: {
|
mark: {show: true},
|
dataView: {show: true, readOnly: false},
|
magicType: {show: true, type: ['line', 'bar']},
|
restore: {show: true},
|
saveAsImage: {show: true}
|
}
|
},
|
tooltip: {
|
trigger: 'axis'
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
axisLabel: {
|
rotate: 30
|
},
|
splitLine: {
|
show: false,
|
},
|
data: []
|
},
|
yAxis: {
|
type: 'value'
|
},
|
dataZoom: [
|
{
|
id: 'dataZoomX',
|
type: 'slider',
|
xAxisIndex: [0],
|
filterMode: 'filter'
|
}
|
],
|
animation: true,
|
animationDuration: 1000,
|
animationDurationUpdate: 1000,
|
animationEasing: 'linear',
|
animationEasingUpdate: 'linear',
|
}
|
|
};
|
