echarts动态折线图，X轴数据量大时，曲线整体左移2022年5月11日

weixin_40164389

于 2022-05-11 15:22:10 发布

阅读量990

点赞数

分类专栏： ts 文章标签： echarts javascript vue.js

本文链接：https://blog.youkuaiyun.com/weixin_40164389/article/details/124710742

版权

ts 专栏收录该内容

1 篇文章

订阅专栏

echarts动态曲线
代码环境vue3 vite ts tsx风格

const setData = () => {
        const date = new Date();
        cdata.weekCategory.push([date.getHours() , date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes(), date.getSeconds()<10?'0'+date.getSeconds():date.getSeconds()].join(":"));
        const distance = Math.round(Math.random() * 20);
        cdata.weekLineData.push(distance); 
        if(cdata.weekCategory.length > 10){
          cdata.weekCategory.shift();
          cdata.weekLineData.shift();
        }  
    }

关键代码
if(cdata.weekCategory.length > 10){
cdata.weekCategory.shift();
cdata.weekLineData.shift();
}
当数据超过10个时，曲线整体左移，
shift是数组的一个方法，取出数组中第一个数据，其它数据往前移一个位置

echarts动态折线图完整代码