[GitHub] [incubator-echarts] wang-dq opened a new issue #11060: Dynamic line chart, dynamic adding data, on the left side of the not smooth movement instead of flashing

[GitBox]

wang-dq opened a new issue #11060: Dynamic line chart, dynamic adding data, on 
the left side of the not smooth movement instead of flashing
URL: https://github.com/apache/incubator-echarts/issues/11060
 
 
   ### Version
   4.2.1
   
   ### Steps to reproduce
    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 areaStyle 成为面积图的关键。
                        itemStyle: {normal: {
                                color:'#0099ff',
                                areaStyle: {type: 'default'},
                                lineStyle:{color:'#0099ff'}  
                        }},
                        areaStyle: {// 实现蓝白渐变色
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 
1, [{
                                offset: 0,
                                color: 'rgb(0, 153, 255)'
                            }, {
                                offset: 0.5,
                                color: 'rgb(255,255,255)'
                            }])
                        }
                    },
                        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;
                        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)])
   
   ### What is expected?
   左侧可以平滑的移动
   
   ### What is actually happening?
   闪动
   
   <!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE -->
   <!-- This issue is in English. DO NOT REMOVE -->

----------------------------------------------------------------
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