vue中echarts的tooltip自动轮播、封装文件与使用（附源码）

一、引入tools.js文件（其实就是echarts-auto-tooltip.js）

因在vue中使用轮播与htnl文件使用echarts-auto-tooltip.js不共用，因此封装一个vue使用的自动轮播。

1. 使用方法：在当前组件入组

<script>
	  //在当前组件引入tools文件
	  import tools from 'tools';
	  mounted() {
	    //执行方法
    	this.drawLine();
  	  },
	  methods(){
			//方法
	  		drawLine(){
			//配置就不详细写了


	  		//渲染echarts加载数据
     		myChart.setOption(options);
      		//增加轮播
      		tools.autoHover(myChart, options, 5, 3000);//固定写法
      		//tools.autoHover(myChart, options, num, time);传参写法
      		//myChart代表echarts的实例名称, options指定图表的配置项和数据, num类目数量(原因：循环时达到最大值后，使其从头开始循环), time轮播间隔时长
     		//解决自适应
      		window.addEventListener("resize", function () {
          		myChart.resize();
      		});
	  	}	  
	  }
</script>
	 

一、vue的tools.js文件代码如下：

/**
 *  echarts tooltip 自动轮播
 *  @author liuwei
 *  @param myChart  //初始化echarts的实例
 *  @param option   //指定图表的配置项和数据
 *  @param num      //类目数量(原因：循环时达到最大值后，使其从头开始循环)
 *  @param time     //轮播间隔时长
 */
export function autoHover(myChart, option, num, time) {
  var defaultData = { //设置默认值
    time: 2000,
    num: 0
  };
  if (!time) {
    time = defaultData.time;
  }
  if (!num) {
    num = defaultData.num;
  }

  var count = 0;
  var timeTicket = null;
  timeTicket && clearInterval(timeTicket);
  timeTicket = setInterval(function () {
    myChart.dispatchAction({
      type: "downplay",
      seriesIndex: 0 ,//serieIndex的索引值   可以触发多个
      dataIndex: count
    });
   	count =count  % num;//增加
    myChart.dispatchAction({
      type: "highlight",
      seriesIndex: 0,
      dataIndex: count
    });
    myChart.dispatchAction({
      type: "showTip",
      seriesIndex: 0,
      dataIndex: count
    });
    count++;
    if (count >= num) {
      count = 0
    }
  }, time);
  myChart.on("mouseover", function (params) {
    clearInterval(timeTicket);
    myChart.dispatchAction({
      type: "downplay",
      seriesIndex: 0
    });
    myChart.dispatchAction({
      type: "highlight",
      seriesIndex: 0,
      dataIndex: params.dataIndex
    });
    myChart.dispatchAction({
      type: "showTip",
      seriesIndex: 0,
      dataIndex: params.dataIndex
    });
  });

  myChart.on("mouseout", function () {
    timeTicket && clearInterval(timeTicket);
    timeTicket = setInterval(function () {
      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 >= 17) {
        count = 0
      }
    }, 3000);
  });
}

export default {
  autoHover
}