You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@echarts.apache.org by GitBox <gi...@apache.org> on 2019/08/20 08:14:53 UTC

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

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:
users@infra.apache.org


With regards,
Apache Git Services

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