代码
splineChart(type, item) {
let equipNm = '';
let no = 0;
let physicMax = 0; // 上限值
let physicMin = 0; // 下限值
let seriesList = [];
let that = this;
if (type === 'C') {
equipNm = item.ycNm;
no = item.ycNo;
physicMax = item.valMax;
physicMin = item.valMin;
seriesList = [{
name: '实时值',
color: '#3875ff',
animation: true,
style: {
color: '#d3d8e2'
},
data: (function() {
let data = [],
time = new Date().getTime(),
i;
for (i = -9; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Number(that.getEquipCurve(no))
});
}
return data;
})()
},
{
name: '上限值',
color: '#f54551',
animation: true,
type: 'spline',
marker: {
enabled: false // 曲线是否显示值圆点
},
dashStyle: 'shortdot',
style: {
color: 'red'
},
data: (function() {
let data = [],
time = new Date().getTime(),
i;
for (i = -9; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: physicMax
});
}
return data;
})()
}, {
name: '下限值',
color: '#f5bb36',
animation: true,
type: 'spline',
marker: {
enabled: false
},
dashStyle: 'shortdot',
style: {
color: 'red'
},
data: (function() {
let data = [],
time = new Date().getTime(),
i;
for (i = -9; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: physicMin
});
}
return data;
})()
},
]
} else {
equipNm = item.yxNm;
no = item.yxNo;
seriesList = [{
name: '实时值',
color: '#3875ff',
animation: true,
style: {
color: '#d3d8e2'
},
data: (function() {
let data = [],
time = new Date().getTime(),
i;
for (i = -9; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: +Number(that.getEquipCurve(no))
});
}
return data;
})()
}]
}
this.equipChartNm = equipNm;
Highcharts.chart('containerE', {
chart: {
type: 'spline',
margin: [40, 23, 80, 60],
backgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 1,
y2: 1
},
stops: [
[0, '#252833'],
[1, '#252833']
]
},
events: {
load: function() {
let series = this.series[0];
let chart = this;
let seriesPhysicMax = [];
let seriesPhysicMin = [];
if (type === 'C') {
seriesPhysicMax = this.series[1];
seriesPhysicMin = this.series[2];
}
that.activeLastPointToolip(chart);
if (this.timeChart) {
clearInterval(this.timeChart);
}
this.timeChart = setInterval(function() {
if (!typeof(that.getEquipCurve(no)) === 'number') {
return;
}
let x = new Date().getTime(),
y = Number(that.getEquipCurve(no));
series.addPoint([x, y], true, true);
if (type === 'C') {
seriesPhysicMax.addPoint([x, physicMax], true, true);
seriesPhysicMin.addPoint([x, physicMin], true, true);
}
that.activeLastPointToolip(chart);
}, that.IntervalTime);
}
},
borderColor: '#252833',
plotBackgroundColor: '#252833',
plotBorderColor: '#999fa8'
},
title: {
text: ''
},
xAxis: {
lineColor: '#999fa8',
type: 'datetime',
tickPixelInterval: 130,
labels: {
style: {
color: '#d3d8e2'
}
},
axisLine: {
lineStyle: {
type: 'solid',
color: 'red', // 左边线的颜色
width: '2' // 坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: 'red' // 坐标值得具体的颜色
}
}
},
yAxis: {
gridLineColor: '#3b4357',
gridLineWidth: 1,
title: {
text: '',
style: {
color: '#999fa8'
}
},
labels: {
style: {
color: '#d3d8e2'
}
}
},
tooltip: {
backgroundColor: '#000',
formatter: function() {
return (
'<b>' +
this.series.name +
'</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +
'<br/>' +
Highcharts.numberFormat(this.y, 3)
);
},
style: {
color: '#d3d8e2'
}
},
legend: {
enabled: type === 'C',
layout: 'horizontal',
x: 0,
verticalAlign: 'top',
y: -5,
floating: true,
align: 'right',
labelFormatter: function() {
return '<span style="color:rgba(240, 244, 255, 0.64)"> ' + this.name + '</span>';
}
},
plotOptions: {
spline: {
animation: true,
}
},
credits: { //配置右下角的版权信息
enabled: false, //是否显示版权信息,默认:true。若想去除图表右下角highcharts官网链接则设置为false。
text: " ", //版权信息显示内容,默认:Highcharts.com。
href: " " //版权信息链接地址,默认:http://www.highcharts.com。
},
series: seriesList
});
},