谈谈echarts

ECharts 是一个基于 JavaScript 的数据可视化图表库，常用于后台管理系统、BI 看板、运营数据分析、业务报表等场景

• 如何使用echarts？
• 如何封装echarts？
• 如何优化echarts性能

如何封装echarts

在业务项目里，一般不会每个页面都手写一整套初始化echarts、以及参数的配置 如 init + setOption + resize

• 基于ECharts二次封装
  • echarts的生命周期的封装，如组件挂载、更新、销毁
  • 默认配置封装，如图表的样式等等，使用组件时，只需要传核心数据
• 集成了业务需求， 将通用的逻辑、业务的配置、常用的样式集成起来
  • 比如y轴悬浮显示、显示个数、自定义悬浮tooltip等等，简化了繁琐的配置

如果不封装echarts，会带来的问题

• 代码重复
• 风格不统一
• 维护成本高
• 效率低

如何优化echarts性能

• 可通过自定义构建echarts，减少echarts体积
• 按需引入，减少包体，以配合 tree-shaking 减少打包体积
• 渲染性能优化
  • 避免重复初始化
    • 不要每次数据变化都重新执行：
    • 初始化一次，后续只更新 option
• 大数据性能问题
  • 分页展示数据
  • 只展示当前视口数据
  • 减少动画的效果