Echarts实现类似心电图动态折线图

https://www.echartsjs.com/examples/zh/editor.html?c=dynamic-data2 官网实例有点不太好使，我自己修改了一下，还加入了echarts自带的加载动画。

页面

页面：<div id="alarmLine" style="height:240px"></div>

Js:

function showLine(Id,Name) {

    var Realtime_chart=echarts.init(document.getElementById('alarmLine')); 

    var data = [];

    var xdata = [];

    function randomData() {

        var value = Math.random() * 100;

        value = value + Math.random() * 10;

        return Math.round(value)

    }

    function XTime() {

        var time =  3000;

        var now=new Date();

        var newnow = new Date(+now.getTime() + time);

        return newnow.toLocaleString();

    }

    for (var i = 0; i < 10; i++) {

        data.push(randomData());

        xdata.push(XTime())

    }

    Realtime_chart.showLoading(

        {

            text:'加载中..',

            color:'#3385ff',

            textColor: 'red',

            maskColor: 'rgba(255, 255, 255, 0.8)',

            textStyle: {

                fontSize: 25

            }

        }

    );

   var  option = {

        title: {

            text: Name

        },

       tooltip: {

           trigger: 'axis'

       },

 

       xAxis: [

           {

               //type:'time',

               type:'category',

               boundaryGap:false,

               data:xdata, //x轴数据

 

           }

       ],

        yAxis: {

            type: 'value',

            boundaryGap: [0, '100%'],

            splitLine: {

                show: false

            }

        },

        series: [{

            name: '实时数据',

            type: 'line',

            smooth:true,

            data: data

        }]

    };

 

    setInterval(function () {

        data.shift();

        data.push(randomData());

        xdata.shift()

        xdata.push(XTime())

        Realtime_chart.hideLoading();

        Realtime_chart.setOption(option);

    }, 3000);