前言
做这个李佳琦推荐口红可视化倒也不是因为自己喜欢买口红或者喜欢看李佳琦，是一次在车上逛微博看到热搜上一个帖子，很详细的整理了这些口红，用手机自带的备忘录写的，但略显简陋，颜色展示仅仅是在色号后面加了个很小的色卡，当时就想，如果可以做个可视化展示岂不是很方便？ 既然有了想法，那么自己实现一下吧
效果图：
👉 预览地址
历程
说到可视化，用的最多的就是echarts，去官网逛了逛，好像没有合适的模子。就去找了canvas的基础库，找到echarts的底层基础库zrender，还有比较详细的中文文档，就开始动手写了。断断续续写了一个星期，其中光是收集颜色代码就花了一天（为什么李佳琦推荐的色号都被抢到官网没货！色卡都没有！还要辛辛苦苦去淘宝，小红书找…😢）。拿到数据想好了设计的界面就开始码代码，用zrender实现创建实例，添加缓动animate，文档写的很详细，默认展示第一个（ysl圆管86），每次hover取到口红的data替换groups.data，并添加对应状态的animate，关于文字详情在拿到结点动态更新即可。
因为在canvas里根据坐标定位，每个颜色group排列组合成10*10的正方形，最开始写这个正方形套了好几个ifelse，写法真的太笨啦，某天晚上看FunctionJS，茅塞顿开，尝试用组合函数的方法抽象出规律，画个坐标轴来找到通用函数，果然五行代码就解决了，尝到函数式编程的甜头，太舒服啦 ~
最后是用webpack把静态资源文件部署到githubPage上，开始还用了json-loader，后来发现webpack本来就可以打包js，json，不需要借助loader，兜兜转转踩了很多坑，还好赶在情人节前发出来了。
当然还有不足的地方，比如在移动端不能自适应，但我一直没想到什么好的方法，留坑以后填吧 ~，最近要学的东西还有很多呀！🐷
这是上个月写的，这个月才简单记录了下，我真的太久没有打理过自己的博客了，立个flag，以后勤更💪
