Echarts可视化教程

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

百度Echarts地图现实定时自动切换

//轮播效果
var hourIndex = 0;
var fhourTime = null;
fhourTime = setInterval(function() {
  myChart.dispatchAction({
    type: "downplay",
    seriesIndex: 0,
  });
  myChart.dispatchAction({
    type: "highlight",
    seriesIndex: 0,
    dataIndex: hourIndex
  });
  myChart.dispatchAction({
    type: "showTip",
    seriesIndex: 0,
    dataIndex: hourIndex
  });
  hourIndex++;
  if (hourIndex > data.length) {
    hourIndex = 0;
  }
}, 2000);
//鼠标移入停止轮播
myChart.on("mousemove", function(e) {
  clearInterval(fhourTime)
  myChart.dispatchAction({
    type: "downplay",
    seriesIndex: 0,
  });
  myChart.dispatchAction({
    type: "highlight",
    seriesIndex: 0,
    dataIndex: e.dataIndex
  });
  myChart.dispatchAction({
    type: "showTip",
    seriesIndex: 0,
    dataIndex: e.dataIndex
  });
})
//鼠标移出恢复轮播
myChart.on("mouseout", function() {
  fhourTime = setInterval(function() {
    myChart.dispatchAction({
      type: "downplay",
      seriesIndex: 0,

    });
    myChart.dispatchAction({
      type: "highlight",
      seriesIndex: 0,
      dataIndex: hourIndex
    });
    myChart.dispatchAction({
      type: "showTip",
      seriesIndex: 0,
      dataIndex: hourIndex
    });
    hourIndex++;
    if (hourIndex > data.length) {
      hourIndex = 0;
    }
  }, 2000);
})
点击展开全文

相关文章

  1. 如何利用ECharts中使用地图热力图展示城市热度
  2. 如何利用ECharts中使用地图展示数据
  3. 百度Echarts地图系列之2020-2023年全国旅行路线图
  4. 百度Echarts地图现实定时自动切换tooltip样式调整
  5. 百度echarts地图显示指定标注