Echarts可视化教程

  1. 网站首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. 地图大全
  6. ECharts官网

百度Echarts饼图中如何实现定时切换(附代码)

如何在百度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 函数来更新图表数据!

点击展开全文

相关文章

  1. 百度Echarts饼图系列之透明效果
  2. 百度Echarts图表系列之画扇面
  3. 百度echarts饼图之多彩花瓣定制图形