var echart;
|
//x坐标
|
var xAxis = [];
|
//y轴数据集
|
var factorDatas = {
|
datas: [],
|
physicalQuantity: [],
|
};
|
var option = {};
|
//经纬度
|
var coor = {};
|
//监测因子类型
|
var factorType = [];
|
|
var date = '';
|
|
var first = true;
|
|
var showBadLngLats = true;
|
|
var drawMarker = false;
|
|
function onCheck(obj) {
|
factorDatas.datas[obj.value].show = obj.checked;
|
factorDatas.physicalQuantity[obj.value].show = obj.checked;
|
|
var series = [].concat(factorDatas.datas); //.concat(factorDatas.physicalQuantity)
|
// FChart.genLineChart(echart, xAxis, series);
|
FChart.lineChartOnLegend(echart, xAxis, series, option)
|
}
|
|
function onCoorCheck(obj) {
|
showBadLngLats = !obj.checked;
|
|
drawMap();
|
}
|
|
function onMarkerCheck(obj) {
|
drawMarker = obj.checked;
|
drawMap();
|
}
|
|
function drawMap() {
|
var lnglats = [];
|
for (const key of Object.keys(coor)) {
|
if (showBadLngLats || coor[key].status == 'A') {
|
lnglats.push([coor[key].lng, coor[key].lat]);
|
}
|
}
|
if (first) {
|
MapUtil.setCenter(lnglats[0]);
|
first = false;
|
}
|
|
if (drawMarker) {
|
MapUtil.drawMarker(lnglats);
|
} else {
|
MapUtil.drawLine(lnglats);
|
}
|
}
|
|
function initView() {
|
$('#date').append(date);
|
}
|
|
function initCheckBox() {
|
var check = $('.multi-checkbox');
|
for (let i = 0; i < factorType.length; i++) {
|
const e = factorType[i];
|
|
var checked = i == 0;
|
var checkbox = $(
|
"<input type='checkbox' id='" +
|
i +
|
"' value=" +
|
i +
|
" onclick='onCheck(this)'/>"
|
);
|
var label = $("<label for='" + i + "'>" + factorType[i] + '</label>');
|
checkbox.attr('checked', checked);
|
|
var item = $('<div></div>');
|
item.css('padding-end', '0.5rem');
|
item.append(checkbox);
|
item.append(label);
|
|
check.append(item);
|
}
|
}
|
|
function initChart(data) {
|
for (let i = 0; i < data.length; i++) {
|
const e = data[i];
|
if (date == '') {
|
date = e.time.substring(0, 10);
|
}
|
xAxis.push(e.time.substring(11, 19));
|
// coor.push([e.lng, e.lat])
|
|
for (let y = 0; y < e.values.length; y++) {
|
const v = e.values[y];
|
var index = factorType.indexOf(v.factorName);
|
if (v.factorName == 'LNG') {
|
if (coor[e.time] == undefined) {
|
coor[e.time] = {};
|
}
|
coor[e.time].lng = v.factorData;
|
// coor[e.time].status = v.statusList[0]
|
}
|
if (v.factorName == 'LAT') {
|
if (coor[e.time] == undefined) {
|
coor[e.time] = {};
|
}
|
coor[e.time].lat = v.factorData;
|
}
|
if (index == -1) {
|
factorType.push(v.factorName);
|
factorDatas.datas.push({
|
name: v.factorName,
|
type: 'line',
|
data: [v.factorData],
|
showAllSymbol: true,
|
animationDelay: function (idx) {
|
return idx * 10;
|
},
|
show: y == 0,
|
markLine: {
|
symbol: 'none',
|
|
data: [
|
// {
|
// name: '选中',
|
// xAxis: 'Tue',
|
// lineStyle: {
|
// color: 'green',
|
// },
|
// },
|
{
|
name: '选中',
|
type: 'average',
|
yAxis: 32,
|
lineStyle: {
|
color: 'red',
|
},
|
},
|
],
|
},
|
});
|
factorDatas.physicalQuantity.push({
|
name: v.factorName + '-物理量',
|
type: 'line',
|
data: [v.physicalQuantity],
|
showAllSymbol: true,
|
show: y == 0,
|
});
|
} else {
|
factorDatas.datas[index].data.push(v.factorData);
|
factorDatas.physicalQuantity[index].data.push(v.physicalQuantity);
|
}
|
}
|
}
|
var series = [].concat(factorDatas.datas); //.concat(factorDatas.physicalQuantity)
|
// const option = {
|
// xAxis: {
|
// type: 'category',
|
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
// },
|
// yAxis: {},
|
// series: [
|
// {
|
// name: 'hehe',
|
// showAllSymbol: true,
|
// animationDelay: function (idx) {
|
// return idx * 10;
|
// },
|
// show: false,
|
// data: [820, 932, 901, 934, 1290, 1330, 1320],
|
// type: 'line',
|
// markLine: {
|
// symbol: 'none',
|
|
// data: [
|
// {
|
// name: '选中',
|
// xAxis: 'Tue',
|
// lineStyle: {
|
// color: 'green',
|
// },
|
// },
|
// {
|
// name: '选中',
|
// type: 'average',
|
// yAxis: 300,
|
// lineStyle: {
|
// color: 'red',
|
// },
|
// },
|
// ],
|
// },
|
// },
|
// ],
|
// };
|
// echart.setOption(option);
|
// var wH = $(window).height();
|
// var wW = $(window).width();
|
|
// var minW = 700;
|
// var minH = 280;
|
|
// var width = wW * 0.3 > minW ? wW * 0.3 : minW;
|
// var height = wH * 0.35 > minH ? wH * 0.35 : minH;
|
// echart.resize({
|
// width: width,
|
// height: height,
|
// });
|
option = FChart.genLineChart(echart, xAxis, series);
|
}
|
|
function refreshChart(data) {
|
//x坐标
|
xAxis = [];
|
//y轴数据集
|
for (var key of factorDatas.datas) {
|
key.data = [];
|
}
|
for (var key of factorDatas.physicalQuantity) {
|
key.data = [];
|
}
|
|
initChart(data);
|
drawMap();
|
}
|
jQuery(function () {
|
MapUtil.init('container');
|
var div = document.getElementById('chart');
|
echart = echarts.init(div);
|
HttpService.getRealtimeData('0a0000000001', 100, function (data) {
|
initChart(data);
|
initCheckBox();
|
initView();
|
drawMap();
|
|
// setInterval(function () {
|
// HttpService.getRealtimeData(60, refreshChart)
|
// console.log("refresh!");
|
// }, 1000 * 10)
|
});
|
});
|
