好像没发到这个下面，重发一下可以把~
获得徽章 7
- #打卡 Day11
今日需求：九宫格，使1全屏时，其余消失
最终实现：
1. 点击事件委托给父元素
2. 点击按钮获取到当前格dom
3. 获取当前格，在第几个格（索引值）
4. 再利用是否全屏变量，控制三个状态：九格，全屏，消失。如有全屏，则根据索引值判定状态处理。
5. 细节优化...
探寻了很多，实现了，也觉得不够完美。
感觉业务逻辑还可以优化，或者有更好的实现方式。展开评论点赞 - #打卡 Day08
书接上回...
总结（下篇）
上回说到：核心难点就在x轴，因为x轴要求是时间轴，且并不是独立的，需要和图关联，水平条形图长度要表示其在x轴上的值区间。echarts已经pass掉。下面调研antdcharts，惊喜的是有区间条形图的直接示例，且通过文档一步步修改示例，可以做到x轴为时间轴，区间值也很好表示，只要数据体是数组形式，内部直接就处理成对应的条形图了。然后继续，略感遗憾的是，缩略轴slider组件，是根据y轴的名称进行缩略的，至少echarts等我所见过的都是以x轴为基，进行缩略的。只能待定。
在翻阅文档时，不难发现，antdcharts的上面是g2plot，可以说官方示例几乎一模一样，区别就是antdcharts是基于g2plot为react量身打造的。当时心想：都找到你“爸”了，还离成功远吗。当即尝试，结果有喜有悲，喜的是，g2plot更加灵活，时间轴的区间可以根据数据自适应，无需自己设置最大最小值，slider组件竟然是基于x轴。悲的是，slider组件只是基于数据值里面的时间区间，并不是真正意义上可以调整时间区间进行缩略，实际效果与antdcharts一般无二，只是slider轴上的文本不一样，本质上也是可以自定义的，看来这点上也只是继承了。
最后：还是选择了antdcharts。理由是与react亲和度更高，好修改。虽然无法使用自带组件了（slider经调研无法使用），咱可自定义这部分，ui就不自己弄了，结合antd的slider浅浅的实现该功能，也算是师出同门。
代码实现：先以实现为目的，后面根据页面的整体方向进行封装拆分（毕竟现在只知道有这个图）。图的基本框架很好弄，需要做的有自定义tooltip提示框，需要提示其他的数据信息，这里就是纯处理数据了，把接口数据处理成图需要的，再处理成tooltip需要展示的。slider自定义组件弄了一天，要处理的细节有点多，所以慢慢来了，在utils下搞了一个处理时间的工具文件。获取当前日期的前/后N天，两日期之差...总之都是为slider服务，滑动slider也是在操作x轴的区间范围，重绘图表超出进行切割。
后话：这也仅仅只是开始，后面的需求还在继续。例如：页面展示九宫格的图，点其中一个要放大完整展示在当前区域内。以及图上的各种细节...
路遥遥之码(马)力 Ya~~~~展开评论点赞 - #打卡 Day07
今天顺利解决了之前的问题！
这里完整的总结下（上篇）
业务需求：要求绘制数据图，需要瀑布柱状图，但是倒置90度过来的条形图，就理解成瀑布条形图吧。x轴要求是时间轴，y轴是名称，每个条形图的值主要就是时间的范围值（2023xxx-2023xxx）。悬浮提示框展示其他一些信息。主要的就以上这些，后面还会有自定义指定数据的条形图颜色等等细节。
调研框架：echarts; ant design charts; g2plot; g2....（react相关的）
调研过程：很明确的一点就是，找不到完全一样的示例可以满足此需求。echarts的受众很多，但是优先就被排除掉了，虽然它并没有水平瀑布条形图的示例，但是修改下瀑布柱状图就可以实现了，本质原理就是堆叠思想，把前面的块图透明化就实现了，但是，他的数据针对时间值的区间，可以说基本没办法实现，难点就在这个x轴的时间线上了。展开评论点赞 - #打卡 Day05
明天就是清明节了，提前祝大家清明快乐与安康。
今天早早来了公司，想下个早班。
昨天已经把上次说的图表需求，开始落地实现了。
最后还是采用了Antdcharts，由于案例都比较简陋，需求比较独有，且还未完善（待实时更新），组件的很多部分都要自定义，借口数据也需要处理，图表中的信息也需要根据数据进行渲染。原本以为今天接着弄就能弄完了，没想到最后还差一个重要部分来不及弄，需要自定义Slider部分进行缩放，本来打算对接antd的滑块组件，但是感觉不理想，最后又看了一眼官方提供的slider，感觉可以试试里面是否有可以自定义出想要的效果的参数。
后天再战！
最后吐槽一句：antdcharts明明是基于g2plot，但是同一个图表示例的 slider 竟然有明显不同！一个基于x轴一个基于y轴！🍐噗哦~ 体验上呢g2plot更成熟一点，x轴时间线也可以自适应，不过修改示例时无意间发现有点点小bug。
（antdchars好像也不更新了，这是在憋大招吗，hahahahhh）展开评论点赞 - #打卡 Day04
今天开发过程遇到一个小Bug![[嘿哈]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_67.9ceed33.png)
，在useEffect初始化执行，调用接口获取数据时，竟然执行了2遍接口，明明已经将useEffect的第二个参数设为空数组，仍然指向了2遍，利用new Date()标识打印发现，不是一个时间同时执行，但是就是执行了2遍，那么这是为什么呢？
于是带着疑问，求助chatgpt... 哦不，其实是百度，果然，答案一下就有了，这是由于React18的新特性：在开发模式（development）且使用了严格模式后，组件会自动执行卸载再重载的操作，这就是导致useEffect被执行了2遍的真正原因，而当然在线上环境（production）是不会出现这种情况的。
那么官方为什么要这么做？这不是没事找事，要是不明所以的程序员，头窟髅皮挠破了都发现不了原来是官方在"搞鬼"。官方这么做的原因有两个：
1、是为了更好的让开发者提前发现，卸载后重复挂载可能会造成BUG的代码。(ps: 官方真是煞费苦心那~ 不明所以的程序员可能会觉得官方这个设计才是BUG![[看]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_97.39cdc9f.png)
）
2、提前布局，官方未来会给React添加新功能新特性，需要用到这个（具体是什么敬请期待吧，也许是类似vue的keepalive）展开评论点赞
⛰️”！![[嘿哈]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_67.9ceed33.png)
，在useEffect初始化执行，调用接口获取数据时，竟然执行了2遍接口，明明已经将useEffect的第二个参数设为空数组，仍然指向了2遍，利用new Date()标识打印发现，不是一个时间同时执行，但是就是执行了2遍，那么这是为什么呢？![[看]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_97.39cdc9f.png)
）