echarts分享(二):自动轮播功能分析和简单实现

前言

在数据可视化项目中，自动轮播是一个很常见的功能，有动感的页面总是要比一个纯静态的页面给用户的感觉要好很多，不仅可以显示页面不足的地方，更可以提升页面的动感。

比如折线图或柱状图的自动轮播显示提示框内容，饼图自动轮播激活区块高亮等，都是项目中的基本要求。今天就来分享一个自动轮播的原理解析和实现。

自动轮播的原理

自动轮播的原理其实说穿了也很简单，重点就是四个字：依次触发。

依次

依次，就是依照数据的展示次序进行操作。说到依次，在JS中自然而然的会想起定时器，没错，原理就是使用了setInterval所实现。代码简单形式如下：

var timeTicket = 0;
timeTicket && clearInterval(timeTicket);
timeTicket = setInterval(function() {
  // 触发的逻辑操作
},3000)

触发

触发，就是调用图表库本身的方法来完成表现的。这个就是属于图表库自身所实现的方法了，各有不同。

此处以echarts为例，在echarts实例的属性方法中，有一个很重要的方法dispatchAction。在
官方文档的介绍上：

触发图表行为，例如图例开关legendToggleSelect, 数据区域缩放dataZoom，显示提示框showTip等等。
payload 参数可以通过batch属性同时触发多个行为。

// 代码高亮
myChart.dispatchAction({
  type: 'highlight',
  seriesIndex: 0,
  dataIndex: count
});
// 展示提示框
myChart.dispatchAction({
  type: 'showTip',
  seriesIndex: 0,
  dataIndex: count
});

了解了这些，接下来我们就可以去实现一个完整的功能了。

自动轮播的实现(简单版)

功能分析

为了便于复用，我们可以把自动轮播功能封装成一个类。而基于我们的功能需求来分析，这个类中需要实现以下功能

• 自动轮播展示内容
• 鼠标移入图表区域，原提示框隐藏，展示就近的数据
• 鼠标移出图表区域，恢复轮播功能

功能实现

• 基础架构实现

新建文件，并把导出对象命名为hoverLoop,其返回数据为清除定时器的方法(使用自动轮播功能的组件数据更新时需要重置定时器)

export function hoverLoop(){
  var timeTicket = 0;
  function clearLoop(){
    //清除定时器 
    if (timeTicket) {
      clearInterval(timeTicket);
      timeTicket = 0;
    }
    // 清除鼠标事件(off为解绑事件处理函数的方法)
    myChart.off('mousemove', stopAutoShow);
    myChart.getZr().off('mousemove', zRenderMouseMove);
    myChart.getZr().off("globalout", zRenderGlobalOut);
  }
  function stopAutoShow() {
    if (timeTicket) {
      clearInterval(timeTicket);
      timeTicket = 0;
    }
  }
  function zRenderMouseMove(param) {
    if (param.event) {
      // 阻止canvas上的鼠标移动事件冒泡
      // param.event.cancelBubble = true;
    }
    stopAutoShow();
  }
  function zRenderGlobalOut() {
    if (!timeTicket) {
      autoShowTip();
    }
  }
  return {
    clearLoop:clearLoop
  }
}

• 生成定时器并绑定鼠标事件

var count = 0;
function autoShowTip() {
    function showTip(){
      myChart.dispatchAction({
        type: "downplay",
        seriesIndex: 0, // serieIndex的索引值   可以触发多个
      });
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: count,
      });
      myChart.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: count,
      });
      count++;
      if (count >= num) {
        count = 0;
      }
    }
    // 为了第一次展示，定时器会在时间间隔后展示数据
    showTip()
    timeTicket = setInterval(showTip, time);
  }
myChart.on("mousemove", stopAutoShow);
myChart.getZr().on("mousemove", zRenderMouseMove);
myChart.getZr().on("globalout", zRenderGlobalOut);
autoShowTip();

功能使用

import { hoverLoop } from "@/utils/hoverLoop.js";

data(){
  return {
    tooltipTimer:null,
  }
},
methods:{
  initChart(){
  	...
    this.myChart.setOption(option);
    this.tooltipTimer && this.tooltipTimer.clearLoop();
    this.tooltipTimer = null;
    this.tooltipTimer = hoverLoop(this.myChart,xLabel.length,2000)
  }
}