如何在百度Echarts饼图实现定时切换,这里我们需要用到setInterval()
方法来设置一个定时器,下面给大家简单介绍一下具体实现代码!
具体代码如下:
// 初始化 Echarts 实例 var myChart = echarts.init(document.getElementById('myChart')); // 定义定时器 var timer = null; // 定义数据 var data = [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ]; // 定义函数,用于更新图表数据 function updateChartData() { // 停止定时器 if (timer) { clearInterval(timer); timer = null; } // 随机生成新的数据 var newData = []; for (var i = 0; i < data.length; i++) { newData.push({ value: Math.floor(Math.random() * 1000), name: data[i].name }); } // 更新图表数据 myChart.setOption({ series: [{ data: newData }] }); // 启动定时器 timer = setInterval(updateChartData, 3000); } // 启动定时器 updateChartData();
PS:每隔 3 秒钟就调用一次 updateChartData 函数来更新图表数据!