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

最新推荐文章于 2024-06-28 08:46:07 发布

置顶

diviner_s

最新推荐文章于 2024-06-28 08:46:07 发布

阅读量1.4w

点赞数 155

分类专栏：数据可视化_Echarts 文章标签：新星计划可视化 javascript echarts

本文链接：https://blog.csdn.net/diviner_s/article/details/117677127

版权

本文介绍了一个使用Echarts实现的动态数据可视化项目，包括自动高亮显示初始化、鼠标点击高亮动画、自动高亮显示和鼠标移开后的恢复。项目涉及的技术栈有html、css、javascript、jQuery、ajax、websocket和koa。文章详细解析了如何通过指针和定时器实现图表的自动循环高亮，并提供了全套代码模板。

摘要由CSDN通过智能技术生成

数据可视化前言：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事件，当我们鼠标放上去时触发事件，接下来又会有一系列操作：

开关关闭false表示取消自动高亮，清除定时器
取消之前高亮的图形
高亮当前图形，显示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'