Skip to content

O
ocrCloudPlatformAdmin
Commit 82c1f24a by 杨琪琪
Options

ecahrts图表动态刷新内存增长问题

parent d083cfd0
Showing with 143 additions and 71 deletions
src/main/resources/static/js/callSupervision/callChartOptions.js
......@@ -5,7 +5,10 @@ var defaultLineOptions = {
left: 'center'
},
tooltip: {
trigger: 'axis'
trigger: 'axis',
axisPointer: {
animation: false
}
},
grid: {
left: '3%',
......@@ -23,33 +26,36 @@ var defaultLineOptions = {
orient: 'horizontal', // vertical
// left: 10,
top: '6%',
animation: false,
},
xAxis: {
type: 'time',
boundaryGap: false,
animation: false
},
yAxis: {
type: 'value',
min: 0,
minInterval: 1,
animation: false
},
markPoint: {
animation: false
},
dataZoom: [
{
id: 'inside',
type: 'inside',
start: 0,
end: 100
},
{
id: 'slide',
start: 0,
end: 100
}
],
series: [
{
type: "line",
data: []
}
]
series: []
}
var defaultXBarOptions = {
grid: {
......@@ -61,7 +67,10 @@ var defaultXBarOptions = {
show: false,
},
tooltip: {
trigger: 'axis'
trigger: 'axis',
axisPointer: {
animation: false
}
},
xAxis: {
show: false,
......@@ -111,7 +120,7 @@ var defaultYBarOptions = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
animation: false
}
},
grid: {
......@@ -124,7 +133,8 @@ var defaultYBarOptions = {
textStyle: {
color: "#fff",
},
left: 10
left: 10,
animation: false,
},
dataset: {
source: []
......
src/main/resources/templates/callSupervision/index.html
......@@ -170,7 +170,6 @@
var timeLineChart = null;
var courtBarChart = null;
var hardwareBarChart = null;
var callYearNum = 1234, callMonthNum = 2345, callDayNum = 34234;
var currYear = new Date().strftime('%Y');
var currMonth = new Date().strftime('%m');
var currDate = new Date().strftime('%d');
......@@ -185,9 +184,9 @@
// 确保layui和echarts已经加载
layui.config({
base: '/js/echarts/' //假设这是你存放拓展模块的根目录
base: 'js/echarts/' //假设这是你存放拓展模块的根目录
}).use(['echarts', 'form', 'laydate', 'table', 'util'], function () {
var echarts = layui.echarts;
var echarts_layui = layui.echarts;
var form = layui.form;
var laydate = layui.laydate;
var table = layui.table;
......@@ -210,7 +209,10 @@
// 全区/地市 切换监听
form.on('switch(area)', function (data) {
restartBrokenLineInterval();
if (timeLineChart) {
timeLineChart.clear();
}
restartBrokenLineInterval(true);
});
// 时间选择器初始
......@@ -224,7 +226,10 @@
btns: ['now'],
max: new Date().strftime('%Y'),
done: function (value, date, endDate) {
restartBrokenLineInterval();
if (timeLineChart) {
timeLineChart.clear();
}
restartBrokenLineInterval(true);
currYear = value;
getCourtUseInYear();
}
......@@ -243,7 +248,10 @@
});
$('.interval-box').css('display', 'none')
}
restartBrokenLineInterval();
if (timeLineChart) {
timeLineChart.clear();
}
restartBrokenLineInterval(true);
currMonth = value;
getCourtUseInMonth();
}
......@@ -267,6 +275,9 @@
});
$('.interval-box').css('display', 'none')
}
if (timeLineChart) {
timeLineChart.clear();
}
restartBrokenLineInterval(true);
currDate = value;
getCourtUseInDay();
......@@ -275,16 +286,12 @@
//时分秒选择框
form.on('radio(radio-time)', function (data) {
restartBrokenLineInterval();
if (timeLineChart) {
timeLineChart.clear();
}
restartBrokenLineInterval(true);
});
callInterval();
restartBrokenLineInterval();
getServerMonitoring(true);
monitorInterval = setInterval(function () {
getServerMonitoring();
}, 5000)
// 表格初始
table.render({
elem: '#call-table',
......@@ -339,34 +346,35 @@
],
// res: 返回信息 curr: 当前页码 count: 数据总量
done: function (res, curr, count) {
// adjustTableHeight();
}
})
// table定时，重新渲染
function refreshTable() {
function refreshTableInterval() {
tableInterval = setInterval(function () {
table.reloadData('callTable');
}, 2000)
}
refreshTable();
// 开启定时器
function startInterval() {
// callInterval();
restartBrokenLineInterval(true);
// getServerMonitoring(true);
// monitorInterval = setInterval(function () {
// getServerMonitoring();
// }, 5000)
// refreshTableInterval();
}
startInterval();
// 窗口大小变化监听
$(window).resize(function () {
resizeText(); // 调整字体大小
// adjustTableHeight(); // 调整table高度
table.resize('callTable');
});
// table高度自适应
function adjustTableHeight() {
let tableHeight = $('#tableContent').height();
let headerHeight = $('.layui-table-header').height();
$(".layui-table-main").css("height", (tableHeight - headerHeight) + "px");
table.resize('callTable');
}
function initChart(chartId, type, key) {
window[key] = echarts.init(document.getElementById(chartId))
var option = {};
......@@ -394,17 +402,21 @@
}
// 时间轴折线图
function updateLineChart({dataObject, showLegend}) {
function updateLineChart({dataObject, showLegend}, isNotMerge) {
// 基于准备好的dom，初始化echarts实例
var seriesData = [];
var legendData = [];
if (dataObject && Object.keys(dataObject).length != 0) {
let i = 0;
for (var k in dataObject) {
var obj = {};
let obj = {};
obj['id'] = `line${i++}`;
obj['type'] = 'line';
obj['name'] = k;
obj['data'] = dataObject[k];
obj['data'] = JSON.parse(JSON.stringify(dataObject[k])); // 对应曲线数据
obj['showSymbol'] = false;
obj['sampling'] = 'lttb';
obj['large'] = true;
seriesData.push(obj);
legendData.push(k);
}
......@@ -418,17 +430,13 @@
datazoom_broken_end_n = event.end
}
})
// timeLineChart.clear();
let option = defaultLineOptions;
let option = {};
if (isNotMerge) {
option = defaultLineOptions;
if (showLegend) {
option.legend.data = legendData;
}
option.series = function () {
let data = JSON.parse(JSON.stringify(seriesData))
return data
}()
let fData = form.val('areaForm');
console.log(' --- 当前刻度单位 --- ', fData.interval)
// 坐标轴最小间隔
switch (fData.interval) {
case 'hour':
......@@ -444,15 +452,36 @@
option.xAxis.minInterval = 1000 * 3600 * 24;
break
}
option.dataZoom[0].start = datazoom_broken_start_n;
option.dataZoom[0].end = datazoom_broken_end_n;
option.dataZoom[1].start = datazoom_broken_start_n;
option.dataZoom[1].end = datazoom_broken_end_n;
} else {
option.dataZoom = [
{
id: 'inside',
type: 'inside',
start: datazoom_broken_start_n,
end: datazoom_broken_end_n
},
{
id: 'slide',
start: datazoom_broken_start_n,
end: datazoom_broken_end_n
}
]
}
// option.series = function () {
// let data = JSON.parse(JSON.stringify(seriesData))
// return data
// }()
option.series = seriesData;
if (isNotMerge) {
timeLineChart.setOption(option, true);
} else {
// 替换合并
timeLineChart.setOption(option, {notMerge: false, replaceMerge: ['dataZoom', 'series']});
}
}
// 获取调用数据
function getBrokenLineData() {
function getBrokenLineData(isNotMerge) {
let fData = form.val('areaForm');
let displayType = "full"
if (!fData.isRegion) {
......@@ -477,7 +506,7 @@
return [new Date(item['time']), item['value']]
})
YArrObject['当前'] = timeArr;
updateLineChart({dataObject: YArrObject, showLegend: false});
updateLineChart({dataObject: YArrObject, showLegend: false}, isNotMerge);
} else {
if (dataObj && Object.keys(dataObj).length != 0) {
for (let k in dataObj) {
......@@ -488,7 +517,7 @@
YArrObject[k] = timeArr;
}
}
updateLineChart({dataObject: YArrObject, showLegend: true});
updateLineChart({dataObject: YArrObject, showLegend: true}, isNotMerge);
}
}
}).catch(function (err) {
......@@ -497,12 +526,13 @@
}
// 重新计时
function restartBrokenLineInterval() {
function restartBrokenLineInterval(isNotMerge) {
datazoom_broken_start_n = 0;
datazoom_broken_end_n = 100;
getBrokenLineData();
getBrokenLineData(isNotMerge);
if (brokenLineInterval) {
clearInterval(brokenLineInterval)
brokenLineInterval = null;
}
brokenLineInterval = setInterval(function () {
getBrokenLineData();
......@@ -546,7 +576,7 @@
year: currYear
}
}).then(function (res) {
callYearNum = res.count;
let callYearNum = res.count ? res.count : 0;
$('#call-year-num').text(callYearNum);
$('#year-text').text(currYear);
resizeText();
......@@ -566,7 +596,7 @@
month: currMonth
}
}).then(function (res) {
callMonthNum = res.count;
let callMonthNum = res.count ? res.count : 0;
$('#call-month-num').text(callMonthNum);
$('#month-text').text(currMonth);
resizeText();
......@@ -587,7 +617,7 @@
day: currDate
},
}).then(function (res) {
callDayNum = res.count;
let callDayNum = res.count ? res.count : 0;
$('#call-day-num').text(callDayNum);
$('#day-text').text(currDate);
resizeText();
......@@ -765,8 +795,6 @@
for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列
console.log(tdCurArr, tdPreArr)
if (data[i][columsName[k]] === data[i - 1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
mark += 1;
tdPreArr.each(function () {//相同列的第一列增加rowspan属性
......@@ -802,10 +830,7 @@
}
function updateYBarChart(source, flag) {
// hardwareBarChart.clear();
// let option_o = hardwareBarChart.getOption();
hardwareBarChart.on('dataZoom', function (event) {
console.log(' --- datazoom --- ', event)
if (event.batch) {
datazoom_start_n = event.batch[0].start
datazoom_end_n = event.batch[0].end
......@@ -822,6 +847,8 @@
option.dataset.source = source;
if (flag) {
let len = source[0].length - 1;
option.series = [];
for (let i = 0; i < len; i++) {
let bar = {
type: 'bar',
barGap: 0,
......@@ -830,14 +857,13 @@
focus: 'series'
},
};
option.series = [];
let n = 0;
while (n < len) {
bar['id'] = `s${i}`;
option.series.push(bar);
n++;
}
hardwareBarChart.setOption(option, {notMerge: true});
} else {
hardwareBarChart.setOption(option, {notMerge: false, replaceMerge: ['series', 'dataset']});
}
hardwareBarChart.setOption(option);
}
function callInterval() {
......@@ -856,6 +882,7 @@
}, 5000)
}
// 清空定时器
function stopInterval() {
if (monitorInterval) {
clearInterval(monitorInterval)
......@@ -871,9 +898,8 @@
}
}
// 页面即将销毁
$(window).on('beforeunload', function () {
stopInterval();
// 移除监听器
function stopListener() {
window.removeEventListener('resize', function () {
if (timeLineChart && timeLineChart.resize) {
timeLineChart.resize();
......@@ -889,7 +915,43 @@
hardwareBarChart.resize();
}
})
}
// 图表销毁
function chartsDestroy() {
if (timeLineChart) {
timeLineChart.dispose();
timeLineChart = null;
}
if (courtBarChart) {
courtBarChart.dispose();
courtBarChart = null;
}
if (hardwareBarChart) {
hardwareBarChart.dispose();
hardwareBarChart = null;
}
}
// 页面销毁前
$(window).on('beforeunload', function () {
stopInterval();
chartsDestroy();
stopListener();
});
document.addEventListener("visibilitychange", destroyObject);
// 页面隐藏销毁图表和定时器
function destroyObject(e) {
if (document.hidden) {
// 清除定时任务
stopInterval();
} else {
// 开启定时任务
startInterval();
}
}
});
</script>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment