效果图

代码

<div id="line1" style="width: 100%;height: 100px;"></div>

// 生成图标方法
/**
 * 生成图表
 * @param {array} cData 图表数据
 * @param {string} home 图表渲染位置Id
 * @param {number} speed 刷新速度 值越大，刷新速度越快
 * @param {string} lineColor 线条颜色
 * @param {number} eraseWidth 擦除宽度
 * 
 * @returns {object} 最终将chart保存到哪一个变量中
 */
const generateChart = (cData, home, speed, lineColor, eraseWidth) => {
    const chartDom = document.getElementById(home);
    let myChart = echarts.init(chartDom);
    let option;
    // 初始数据截取位置
    let splitPointer = 0;
    // 前后两条线之间的距离
    const EraseWindow = eraseWidth;
    let counter = 0;
    // 根据数据生成随机数据(这里的数据后续需要从后端获取，现在这里仅为测试用)
    const randomData = () => {
        let value = cData[counter % cData.length];
        counter++;
        return {
            name: counter % cData.length,
            value: [counter % cData.length, Math.round(value)]
        };
    }
    let data = [];
    for (var i = 0; i < cData.length; i++) {
        data.push(randomData());
    }
    option = {
        grid: {
            top: 0,
            left: 10,
            right: -80,
            bottom: 0,
        },
        xAxis: {
            type: 'value',
            show: false
        },
        yAxis: {
            type: 'value',
            show: false
        },
        series: [
            {
                name: '1',
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: data,
                lineStyle: {
                    color: lineColor
                }
            },
            {
                name: '1',
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: data,
                lineStyle: {
                    color: lineColor
                }
            }
        ]
    };
    // 定时刷新数据
    setInterval(function () {
        splitPointer = data.length - (counter % data.length);
        splitPointer = data.length - splitPointer;
        var p1 = data.slice(0, splitPointer);
        var p2 = data.slice(splitPointer + EraseWindow);
        p2.pop();
        // 影响视觉效果的速度 值越大，速度越快
        counter += speed;
        myChart.setOption({
            series: [
                {
                    data: p1
                },
                {
                    data: p2
                }
            ]
        });
    }, 1);
    option && myChart.setOption(option);
    return myChart;
}