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

本文主要是介绍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)}
}