利用ECharts实现数据的左右移动

来源：互联网发布：帝国时代2非洲王朝mac 编辑：程序博客网时间：2024/05/21 10:23

今天看到一个需求

“打开这个链接

http://echarts.baidu.com/demo.html#bar-tick-align

左边是代码
修改这个代码

让右边的图，每隔一秒向左移一位,最左边的柱移出屏幕,最右边增加一个随机数.”

首先第一步考虑的是，获取到这个数组：

var data= option.series[0].data;//获取数组

其次是做一个定时器，随机生成一个随机数，push到数组，并且删除数组的第一个元素：

window.setInterval(function(){data.shift();var randomNum=parseInt(Math.random()*400)data.push(randomNum);console.log(data);//查看下数组是否满足需求},1000);

然后是写一个刷新的函数，并把新的数据绑定到ECharts中：

function refreshData(){var option = myChart.getOption();//获取页面的optionoption.series[0].data = data;//设置新的数据myChart.setOption(option);//绑定到ECharts}

最后在定时器里调用刷新函数，使数据产生移动效果：

window.setInterval(function(){data.shift();var randomNum=parseInt(Math.random()*400)data.push(randomNum);console.log(data);refreshData();},1000);

完整代码如下：

app.title = '坐标轴刻度与标签对齐';option = {    color: ['#3398DB'],    tooltip : {        trigger: 'axis',        axisPointer : {            // 坐标轴指示器，坐标轴触发有效            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'        }    },    grid: {        left: '3%',        right: '4%',        bottom: '3%',        containLabel: true    },    xAxis : [        {            type : 'category',            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],            axisTick: {                alignWithLabel: true            }        }    ],    yAxis : [        {            type : 'value'        }    ],    series : [        {            name:'直接访问',            type:'bar',            barWidth: '60%',            data:[10, 52, 200, 334, 390, 330, 220]        }    ]};var data= option.series[0].data;window.setInterval(function(){data.shift();var randomNum=parseInt(Math.random()*400)data.push(randomNum);console.log(data);refreshData();},1000);function refreshData(){var option = myChart.getOption();option.series[0].data = data;myChart.setOption(option);}

补充：

因为数组里始终只有七个元素，并且元素的位置是不断变化的，所以产生了移动的效果。。。

阅读全文

0 0