vue+canvas实现数据实时从上到下刷新瀑布图效果(类似QT的)

话不多说了,先上一张Demo图,实现的功能有:左侧图例、右侧瀑布图、鼠标移入弹出当前坐标对应的数据信息(有优化的空间,大家自由发挥)。

vue+canvas实现数据实时从上到下刷新瀑布图效果(类似QT的)_第1张图片

图例使用到的插件

这里推荐使用安装npm插件colormap

瀑布图主体内容

这里不多做解释了,都是一些原生标签还有vue绑定的事件,可以根据实际项目情况自己封装成组件,我这里是写在一起的。

这里是用到的Data数据

  • colormap:颜色库
  • legend:图例
  • waterFall:瀑布图
  • waterFallList:瀑布图源数据
  • waterFallIndex:瀑布图定时器用到的计数标识
  • waterFallCopyList:瀑布图二维数组(用来显示数据做的临时储存)
  • waterFallIntervals:瀑布图定时器
  • waterFallWidth:瀑布图的宽度(后端返回的数据length)
  • waterFallHeight:瀑布图定高度(也可以理解成渲染次数 例如30次渲染完成)
  • maxNum:图例最大值
  • minNum:图例最小值

                    
                    

你可能感兴趣的:(vue+canvas实现数据实时从上到下刷新瀑布图效果(类似QT的))