vue+echarts中使图表能循环显示tooltip-使用封装tooltip的方法轮询显示图表数据

问题：
在做echarts图表时总感觉单纯的一个折线图十分单调，所以思考如何让图标的数据轮询显示？
解决：
本来echarts的tooltip属性就有这样轮询显示的方法，但是vue结合echarts之后会使这样的方法直接使用存在困难，而且还有鼠标移入移出怎样处理就会提高问题的复杂性，所以我们通过封装一个这样的方法的js文件，在vue中通过引用文件，再调用其方法，我们可以成功实现轮询数据的功能！

• 封装一个tools.js的包

// 注意:内容不需要修改，直接创建一个名为tools.js文件，然后将此处复制过去就行
// 这里我将tools.js放在了utils文件下，后面vue中引用会用到
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文件中引用

// 这里我是配置了vuex的引用，所以直接@/引用了，如果没有配置还是用../的方式叭
<script>
  import {autoHover} from '@/utils/tools'
  export default {
	data () {},
	mounted () {},
	methods () {}
  }
</script>

• 然后就是在后面具体的方法调用autoHover方法就可以了

// 比如我画图的函数是methods里面的drawCharts()
// 以一个图表为例，具体调用如下：
drawCharts () {
...
myCharts.setOption(myChartsOption)
autoHover(myCharts, myChartsOption, 58, 1000)
}
// 分析：
autoHover(初始的实例化对象, 设置的参数对象, 轮询的数据点数, 轮询间隔/单位ms)
初始的实例化对象和设置的参数对象---上放图表咋命名就写啥
轮询的数据点数---循环时达到最大值后，使其从头开始循环,所以是数据点数
轮询间隔/单位ms---如果数据点多可以设置小一点，一般为1000即一秒

如果还有什么问题，欢迎在评论区交流！！！