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