Vue 开发 ECharts 踩坑指南

前端狗

2019/06/12 发布于 技术 分类

Vue  vueconf 

文字内容
1. WRITING ECHARTS IN VUE codepen.io Yuan Yuan 2019.6.8 English only
2. 内存和崩溃问题 MEMORY & CRASH
3. 每秒传输帧数 FRAMES PER SECOND 每秒动画的画⾯数,代表渲染速度 问题表现:风扇⼤、卡顿 排查步骤:ECharts => Vue.js + ECharts =>业务逻辑
14. 内存和崩溃问题 MEMORY & CRASH Chrome developer tools => memory => Allocation instrumentation on timeline => Start 蓝⾊的条是占⽤的,灰⾊的条是释放的 如果吞吐量较⼤,需要放⼤看到⼩的泄漏点
19. this.chart = echarts.init(…. this.chart.setOption(… addListerner(this.$refs.chart, this.chart.resize); 以上代码在 beforeDestroy 之前要哪些⼯作?
20. VUE-ECHARTS
21. TIPS 小技巧
22. 2019-06-08 08-32-33
27. 总结 FPS: 将动效和⾮非动效使⽤用 Zlevel 分层 减少 setOption 次数 降低屏幕分辨率 Instance 对象不不能 Reactive ( Vue-Echarts ) 注意去重
28. 总结 内存: Instance 对象不不能 Reactive ( vue-echarts ) 注意实例例、事件等回收(注意 context,关 注吞吐量量) 关注 Performance => Memory => Allocation setTimeout 喘⼀一⼝口⽓气 \
29. 总结 通⽤用套路路: 降级到只有 ECharts 的部分,再逐步加上业 务逻辑 chartInstance.getZr() 能获取 zrender params.event.target 能获取对象 (慎⽤用)
30. Thank you all -Yuan Yuan