手把手教你做出数据可视化项目（五）动态高亮显示动画

数据可视化前言：https://blog.csdn.net/diviner_s/article/details/115933789
Apache Echarts简介：https://blog.csdn.net/diviner_s/article/details/115934089
项目最终效果图：

此篇博客为自己学习pink老师的课后完成的项目的总结与记录，仅供交流参考。版权所有，转载请标注原作者！
使用echarts技术做的可视图，此外其项目包含 的技术有html、css、js、jquerry、ajax、websocket、koa等。

今天分享的是此项目图表的一个动态高亮显示，我们看上图，我们发现每个图表上的高亮是自动的并且会不停循环
我们放大来看下
柱状图的动态高亮效果：

再看一下南丁格尔图：

这些均是自动循环高亮显示【也就是我们不需要鼠标点击自动展示每个图标的对应数据！】

我们来分析下如何实现高亮显示：

自动高亮显示初始化

如何实现高亮？我们会想到，直接用鼠标放在对应的地方就会高亮显示，因此我们此效果就是通过绑定鼠标事件使之实现的！
怎么让他一个一个显示？当然是鼠标一个一个有序的点击，因此我们需要定义一个类似指针的指向数组下标达到指向对应的数据项。

如上图，0-4就是下标范围。

定义一个开关，标记当我们手动鼠标放在图标上时关闭自动高亮，鼠标移开后开启自动高亮。
JS代码：

  var _this2 = this
  var isSet2 = true // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消
  var currentIndex2 = 0 // 模拟一个类似指针，达到循环数据组下标效果

鼠标点击高亮动画

鼠标放上去解释：当鼠标指针位于元素上方时，会发生 mouseover 事件。
我们绑定mouseover事件，当我们鼠标放上去时触发事件，接下来又会有一系列操作：

1. 开关关闭false表示取消自动高亮，清除定时器
2. 取消之前高亮的图形
3. 高亮当前图形，显示tooltip

JS代码

// 2、鼠标移动上去的时候的高亮动画
  myChart.on('mouseover', function (param) {
   
    isSet2 = false
    clearInterval(_this2.startCharts)
    // 取消之前高亮的图形
    myChart.dispatchAction({
   
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: currentIndex2
    })
    // 高亮当前图形
    myChart.dispatchAction({
   
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: param.dataIndex
    })
    // 显示 tooltip
    myChart.dispatchAction({
   
      type: 'showTip'