Highchart图表-实时曲线

Vue 2年前 (2021) bestcyt
523 0 0
Highchart图表-实时曲线

代码

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
	});
},

 

版权声明:bestcyt 发表于 2021年1月28日 am10:13。
转载请注明:Highchart图表-实时曲线 | 爱前端导航

相关文章

联系站长