Vue 开发 ECharts 踩坑指南
2020-03-01 2141浏览
- 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 =>业务逻辑
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.内存和崩溃问题 MEMORY & CRASH Chrome developer tools => memory => Allocation instrumentation on timeline => Start 蓝⾊的条是占⽤的，灰⾊的条是释放的 如果吞吐量较⼤，需要放⼤看到⼩的泄漏点
- 15.
- 16.
- 17.
- 18.
- 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
- 23.
- 24.
- 25.
- 26.
- 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
