vue中echarts的tooltip輪播（echarts版本：4.1.0）

現在在項目中需要實現echarts圖表的tooltip的輪播

GitHub地址（如果有用不要吝嗇你的贊）

在echarts2.0的API中可以找到如下描述：

這里我們知道，要實現輪播主要就是使用dispatchAction

以下是實現代碼：

var count = 0;
var timeTicket = null;
timeTicket && clearInterval(timeTicket);
timeTicket = setInterval(function () { //設置定時循環
  myChart.dispatchAction({
    type: "downplay", //serieIndex的索引值
    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
 }
}, 3000);

上述代碼只能實現循環，但是鼠標的移入移出事件會受到影響

還需添加鼠標的mouseover事件和mouseout事件：

  var count = 0;
  var timeTicket = null;
  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 >= 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);
  });

通過上面代碼可以實現tooltip的輪播效果，並且在鼠標的移入時，不會影響tooltip的出現，不會造成無法查看當前類目的tooltip。

因為是在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: 100
  };
  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的索引值   可以觸發多個
    });
    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
}

接下來要做的就是在vue文件中引用：

<template>
  <div class="wrapper">
    <div class="bar" id="bar"></div>
  </div>
</template>

<script>
import tools from "tools";  //引入tools.js
export default {
  components: {},
  props: {},
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.drawRightLine();
  },
  watch: {},
  computed: {},
  methods: {
    drawRightLine() {
      // 基於准備好的dom，初始化echarts實例
      var myChart = echarts.init(document.getElementById("rightLine"));
      // 指定圖表的配置項和數據
      var option = {
        title: {
          text: "ECharts 入門示例"
        },
        tooltip: {},
        legend: {
          data: ["銷量"]
        },
        xAxis: {
          data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
        },
        yAxis: {},
        series: [
          {
            name: "銷量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      // 使用剛指定的配置項和數據顯示圖表。
      myChart.setOption(option);
      //使用輪播插件,填入相關參數
      tools.autoHover(myChart, option, 17, 3000);
    }
  }
};
</script>
<style scoped>
.wrapper {
  height: 100%;
  width: 100%;
}
.bar {
  height: 100%;
  width: 100%;
}
</style>