144 lines
4.5 KiB
JavaScript
144 lines
4.5 KiB
JavaScript
$(function()
|
|
{
|
|
$('[data-toggle=tooltip]').tooltip();
|
|
|
|
var i = 0;
|
|
var series = [];
|
|
var colors = ['#33B4DB', '#7ECF69', '#FFC73A', '#FF5A61', '#50C8D0', '#AF5AFF', '#4EA3FF', '#FF8C5A', '#6C73FF'];
|
|
//var background = ['#E1F4FA', '#ECF8E9', '#FFF7E2', '#FFE7E8', '#E5F7F8', '#F3E7FF', '#E5F1FF', '#FFEEE7', '#E9EAFF'];
|
|
|
|
var chartDom = document.getElementById('cfdChart');
|
|
if(Object.keys(chartData).length && chartDom)
|
|
{
|
|
$.each(chartData['line'], function(label, set)
|
|
{
|
|
series.push({
|
|
name: label,
|
|
type: 'line',
|
|
stack: 'Total',
|
|
color: colors[i],
|
|
areaStyle: {
|
|
color: colors[i],
|
|
opacity: 0.2
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
lineStyle:{
|
|
width: 1
|
|
}
|
|
}
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: eval(set)
|
|
})
|
|
i ++;
|
|
})
|
|
|
|
var CFD = echarts.init(chartDom);
|
|
var option;
|
|
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: '#6a7985'
|
|
}
|
|
},
|
|
formatter: function(params)
|
|
{
|
|
var newParams = [];
|
|
var tooltipString = [];
|
|
newParams = params.reverse();
|
|
newParams.forEach((p) => {
|
|
const cont = p.marker + ' ' + p.seriesName + ': ' + p.value + '<br/>';
|
|
tooltipString.push(cont);
|
|
});
|
|
return tooltipString.join('');
|
|
},
|
|
textStyle: {
|
|
fontWeight: 100
|
|
}
|
|
},
|
|
legend: {
|
|
data: Object.keys(chartData['line']).reverse()
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '5%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: chartData['labels'],
|
|
name: XUnit,
|
|
axisLine:
|
|
{
|
|
show: true,
|
|
lineStyle:
|
|
{
|
|
color: '#999',
|
|
width:1
|
|
}
|
|
}
|
|
}],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
minInterval: 1,
|
|
name: YUnit,
|
|
nameTextStyle:
|
|
{
|
|
fontWeight: 'normal'
|
|
},
|
|
axisPointer:
|
|
{
|
|
label:
|
|
{
|
|
show: true,
|
|
precision: 0
|
|
},
|
|
},
|
|
axisLine:
|
|
{
|
|
show: true,
|
|
lineStyle:
|
|
{
|
|
color: '#999',
|
|
width: 1
|
|
}
|
|
}
|
|
}
|
|
],
|
|
series: series,
|
|
};
|
|
|
|
option && CFD.setOption(option);
|
|
window.addEventListener('resize', CFD.resize);
|
|
}
|
|
|
|
$('#type').change(function()
|
|
{
|
|
location.href = createLink('execution', 'cfd', 'executionID=' + executionID + '&type=' + $(this).val());
|
|
});
|
|
|
|
$('#weekend').click(function()
|
|
{
|
|
var type = $('#type').val();
|
|
withWeekend = withWeekend == 'true' ? 'false' : 'true';
|
|
var begin = Base64.encode(encodeURIComponent($('#begin').val()));
|
|
var end = Base64.encode(encodeURIComponent($('#end').val()));
|
|
location.href = createLink('execution', 'cfd', 'executionID=' + executionID + '&type=' + type + '&withWeekend=' + withWeekend + '&begin=' + begin + '&end=' + end);
|
|
});
|
|
|
|
$("#end, #begin").datetimepicker('setEndDate', maxDate);
|
|
$("#end, #begin").datetimepicker('setStartDate', minDate);
|
|
$('.datetimepicker-days table tfoot').append('<tr><th colspan="7">' + dateRangeTip + '</th></tr>');
|
|
});
|