ECharts实时曲线图表

代码：

splineChart(type, item) {
            if (this.timeChart) {
                clearInterval(this.timeChart);
            }
            let equipNm = '';
            let no = 0;
            no = type === 'C' ? item.ycNo : item.yxNo;

            let that = this;
            this.equipChartNm = equipNm;
            let realTimeValue = []; //实时值
            let physicMax = []; // 上限值
            let physicMin = []; // 下限值

            let smooth = true; //曲线还是折线
            let axisLine = {
                lineStyle: {
                    type: 'solid',
                    color: '#9197a0', // 左边线的颜色
                    width: '1' // 坐标线的宽度
                }
            };
            let axisLabel = {
                textStyle: {
                    color: '#e6e6e6' // 坐标值得具体的颜色
                }
            };

            function legendTitleRight(title) {
                return {
                    name: title,
                    textStyle: {
                        fontSize: 12,
                        color: '#f4f4f4'
                    },
                }
            };
            let legendData = [legendTitleRight('实时值')];
            let seriesList = [{
                type: 'line',
                name: '实时值',
                color: '#3875ff',
                smooth,
                style: {
                    color: '#d3d8e2'
                },
                showSymbol: true,
                hoverAnimation: true,
                data: this.randomData(that.getEquipCurve(no))
            }]

            if (type === 'C') {
                physicMax.push(this.randomData(item.valMax));
                physicMin.push(this.randomData(item.valMin));

                that.equipChartNm = item.ycNm;

                legendData = [legendTitleRight('实时值'), legendTitleRight('上限值'), legendTitleRight('下限值')];

                seriesList.push({
                    name: '上限值',
                    type: 'line',
                    smooth,
                    color: '#f22433',
                    style: {
                        color: '#d3d8e2'
                    },
                    showSymbol: false,
                    hoverAnimation: true,
                    data: physicMax
                }, {
                    name: '下限值',
                    type: 'line',
                    smooth,
                    color: '#f5bb36',
                    style: {
                        color: '#d3d8e2'
                    },
                    showSymbol: false,
                    hoverAnimation: true,
                    data: physicMin
                })
            }else {
                that.equipChartNm = item.yxNm;
            }
            this.hisChartRealTime.setOption({
                grid: {
                    left: '4%',
                    top: '10%',
                    right: '5%',
                    bottom: '7%',
                    containLabel: true,
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function(params) {
                        params = params[0];
                        return params.name;
                    },
                    axisPointer: {
                        animation: true
                    }
                },
                legend: {
                    show: true,
                    orient: 'horizontal', // 'vertical'
                    x: 'right', // 'center' | 'left' | {number},
                    y: 'top', // 'center' | 'bottom' | {number}
                    left: '30',
                    top: '7',
                    data: legendData
                },
                xAxis: {
                    lineColor: '#999fa8',
                    type: 'time',
                    splitLine: {
                        show: false
                    },
                    labels: {
                        style: {
                            color: '#595959'
                        }
                    },
                    axisLine,
                    axisLabel
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%'],
                    splitLine: {
                        show: true,
                        lineStyle:{
                            color:'#343a4c',
                            width: 1
                        }
                    },
                    title: {
                        text: '',
                        style: {
                            color: '#999fa8'
                        }
                    },
                    labels: {
                        style: {
                            color: '#595959'
                        }
                    },
                    axisLine:{
                        lineStyle: {
                            type: 'solid',
                            color: '#252833', // 左边线的颜色
                            width: '1' // 坐标线的宽度
                        }
                    },
                    axisLabel
                },
                series: seriesList
            });

            if (type === 'C') {
                this.timeChart = setInterval(function() {
                    if (realTimeValue.length > 10) {
                        realTimeValue.shift();
                        physicMax.shift();
                        physicMin.shift();
                    }
                    realTimeValue.push(that.randomData(that.getEquipCurve(no)));
                    physicMax.push(that.randomData(item.valMax));
                    physicMin.push(that.randomData(item.valMin));

                    that.hisChartRealTime.setOption({
                        series: [{
                            data: realTimeValue,
                        }, {
                            data: physicMax
                        }, {
                            data: physicMin
                        }]
                    });
                }, that.IntervalTime);
            } else {
                this.timeChart = setInterval(function() {
                    if (realTimeValue.length > 10) {
                        realTimeValue.shift();
                    }
                    realTimeValue.push(that.randomData(that.getEquipCurve(no)));
                    that.hisChartRealTime.setOption({
                        series: [{
                            data: realTimeValue,
                        }]
                    });
                }, that.IntervalTime);
            }
        },

示例：https://echarts.apache.org/examples/zh/editor.html?c=dynamic-data2