最开始想着直接调后端接口，拿到数据往ECharts里一塞就完事。但实际接手才发现根本不是那么回事。第一个坑就是数据格式问题。后端返回的JSON结构经常变，今天数组套对象，明天对象套数组。后来学乖了，在接口处统一做了层数据清洗：
这样无论后端怎么改，前端展示层代码都不用动。有个项目靠这招扛住了后端接口的十几次变更。
第二个痛点是性能。当数据量上来之后，浏览器直接卡成PPT。有次用户导出了三个月的数据，将近十万条记录，页面直接白屏。后来做了分片加载：
再加上Web Worker做离线计算，总算解决了卡顿问题。这里有个细节，记得要给计算进度加个loading动画，否则用户会以为页面卡死了。
数据可视化选型也踩过坑。开始为了炫酷用了D3.js，结果开发周期直接翻倍。后来常规需求改用G2Plot，封装好的组件真香。不过遇到定制化需求还是得手写Canvas，比如要画个带渐变效果的环形进度条：
移动端适配又是另一个故事。触屏设备上hover状态全部失效，只好改成点击交互。图表精度太高导致小屏幕上根本看不清，最后做了响应式配置：
最近在尝试WebGL渲染，Three.js做3D数据可视化确实酷炫，但兼容性是个大问题。中台系统里用了这个方案，结果某些老旧电脑直接蓝屏，只好又退回Canvas 2D方案。
现在做数据分析模块，会提前考虑这些点：数据缓存策略（IndexedDB真不是摆设）、错误降级方案（图表挂了至少显示个数据表格）、骨架屏加载（让用户知道在努力加载）。有一次服务器挂掉，因为做了本地缓存，用户还能查看历史数据，这个设计让客户特别满意。
说实话，前端搞数据分析最难的倒不是技术，是怎么把业务逻辑转化成数据模型。有一次要做会员转化漏斗，产品给的指标和实际数据对不上，排查半天发现是埋点时机有问题。后来养成了习惯，所有数据指标都要和产品反复确认统计口径。
最近在尝试用机器学习做前端异常检测，TensorFlow.js确实能跑起来，但模型加载速度堪忧。可能还得继续优化，或者换个思路，用简单的阈值告警先顶着。
做完几个数据项目后悟出来个道理：前端数据分析本质上是用技术讲故事。同样的数据，用不同方式呈现，带给用户的感受天差地别。现在每次开工前都会先问自己：这次要通过数据讲什么故事？是趋势？是对比？还是分布？想清楚这个，技术选型自然就明朗了。
对了，最近发现个宝藏库AntV/G6，做关系图谱特别方便，准备在下个项目的风控模块里试试水。前端的数据分析之路，还长着呢。