vue中echarts的tooltip轮播

 

现在在项目中需要实现echarts图表的tooltip的轮播

在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>