忙于工作，停更很长时间了，最近继续开搞，先写此一篇。生活犹如演绎，写作算是解说，先看效果：
由来
想在BI里面引入一些别具一格的新元素，这个想法由来已久，本来是想做下面的这种效果：
这个是chart.xkcd 手绘风格图表库，我之前写过一篇介绍，详细介绍可以查看手绘风格的图表库（char.xkcd），可是由于davinci采用的是echarts，通过尝试未找到合适的很好的解决方案，只能暂时搁置了。
所以先做了这个鱼馆的场景，缘起于之前做过的项目，类似于一个积分系统，从积分到最终呈现单独做的。试想一下，如果有这样的BI工具，支持这样的场景，也就能根据数据快速生成，所以这样想，需求、场景都是有的，就尝试在BI里面集成这种鱼馆的效果，也算给BI的一种新的元素。
技术选型
技术点在动画选型上，后端不需要操作，这里我们推荐几种技术实现
jQuery：之前就是用jQuery实现的，完全没有问题，就是代码量看上去比较繁琐
lufylengend：这是个h5的引擎，简单、功能强大，有兴趣可以了解一下，用于实现这个功能偏重，但是后续考虑增加一些特性会比较方便，功能没得说。
animate相关的npm包：
1、animate-npm：这个包有点像被抢注了，功能实在简单，简单到看上去就不是你想要的
2、bendc/animate：这个是个封装的js文件，是6年前开发的了，完全够用，操作方便
3、bendc/animateplus：这个包和上一个是一个作者，一看就是升级版，也已经开发有3年了，支持npm直接安装
这里我们用的bendc/animateplus，也可以尝试其它的，我们用到的动画只是简单的，不需要复杂的功能，更不需要复杂的算法。这里特别强调一下，这个本身就是开源的封装，没有完整的api，知识盲点会导致需要不断的尝试才行。
功能点介绍
| 序号 | 功能 | 备注 |
|---|---|---|
| 1 | 数据模型 | 一个维度，一个指标，示例：用户和积分 |
| 2 | 主题 | 鱼馆背景可切换，海洋元素一些引入 |
| 3 | 速度 | 速度可设定 |
| 4 | 积分等级 | 目前固定，通过积分判断区间和对应的等级及动物 |
| 5 | 信息展示 | 默认展示维度信息，如用户及积分信息 |
背景切换
速度切换
显示指标
单击显示指标信息，再次单击隐藏指标信息，我们也不提倡排名看分就隐藏
示例数据结构
积分等级处理
这里效果图是随机取的动物，正常配置通过积分判断所处的等级和对应的动物，目前是静态的配置文件，后续也应该是可配置化。
交流学习
学习Metabase、Davinci等开源BI，群号：72569367，感兴趣的可以加一下。
备注：技术选型尝试多次，每个都有各自的优缺点，就会有所取舍，亦或者不能完全深入了解，这次BI里面加入这种非常规的东西也算是一种尝试，欢迎进群交流，留言和点赞。gif图片太大，进行了压缩，影响效果，由于素材牵扯版权的问题，暂时也不能提交代码，希望能制作素材的朋友联系。