ECharts图表-实时曲线

 

代码

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