[GitHub] [incubator-echarts] wang-dq opened a new issue #11057: 折线图动态添加数据时，左侧不能很平滑的移动，而是闪动

[GitBox]

wang-dq opened a new issue #11057: 折线图动态添加数据时，左侧不能很平滑的移动，而是闪动
URL: https://github.com/apache/incubator-echarts/issues/11057
 
 
    var myChart = echarts.init(document.getElementById('main'));
           var option = {
                    title: {
                        text: 'Topic'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['内存使用情况', '当前数量']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: {
                                readOnly: false
                            },
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    dataZoom: {
                        show: false,
                        start: 0,
                        end: 100
                    },
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        data: (function() {
                            var now = new Date();
                            var res = [];
                            var len = 100;
                            while (len--) {
                                
res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
                                now = new Date(now - 2000);
                            }
                            return res;
                        })()
                    }],
                    yAxis: [{
                        type: 'value',
                        scale: true,
                        name: '内存使用情况',
                        max: 20,
                        min: 0,
                        boundaryGap: [0.2, 0.2]
                    }, {
                        type: 'value',
                        scale: true,
                        name: '当前数量',
                        min: 0,
                        boundaryGap: [0.2, 0.2]
                    }],
                    series: [{
                        name: '当前数量',
                        type: 'line',
                        yAxisIndex: 1,
                        itemStyle: {normal: {
                                color:'#ffd700', 
                                lineStyle:{color:'#ffd700'}  
                        }},
                        data: (function() {
                            var res = [];
                            var len = 100;
                            while (len--) {
                                res.push(null);
                            }
                            return res;
                        })()
                    }, {
                        name: '内存使用情况',
                        type: 'line',
                        smooth:true,
                        itemStyle: {normal: {
                                color:'#0099ff',
                                areaStyle: {type: 'default'},
                                lineStyle:{color:'#0099ff'}  
                        }},
                   
                        data: (function() {
                            var res = [];
                            var len = 0;
                            while (len < 100) {
                                res.push(null);
                                len++;
                            }
                            return res;
                        })()
                    }]
                };
                var 
times=[1000,2000,3000,4000,1000,2000,3000,4000,1000,2000,3000,4000];
   
                function setData(){
                        let len=parseInt(Math.random()*10)
                        axisData = (new 
Date()).toLocaleTimeString().replace(/^\D*/, '');
                        var data0 = option.series[0].data;
                        var data1 = option.series[1].data;
                            //这里推出的数据跟推入的数据量是不等的
                        for (var i=0;i<(len+10);i++){
                                data0.shift();
                                data1.shift();
   
                                option.xAxis[0].data.shift();
                        }
                        for (var i=0;i<(len+10);i++){
                                data0.push(Math.round(Math.random() * 10000));
                                data1.push(Math.round(Math.random() * 20));
                                option.xAxis[0].data.push(axisData);
                        }
                        option.series[0].data=data0
                        option.series[1].data=data1
                        myChart.setOption(option);
   
                        setTimeout(()=>{
                                setData(len)
                        },times[len])   
                }
                
                setTimeout(()=>{
                        setData()
                },times[parseInt(Math.random()*10)])

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscr...@echarts.apache.org
For additional commands, e-mail: dev-h...@echarts.apache.org