一、前言
前端开发需要经常使用echarts图表渲染数据信息,在一个项目中我们经常需要使用多个图表,选择封装echarts组件复用的方式可以减少代码量,增加开发效率。
二、封装ECharts组件
为什么要封装组件
避免重复的工作量,提升复用性
使代码逻辑更加清晰,方便项目的后期维护
封装组件可以让使用者不去关心组件的内部实现以及原理,能够使一个团队更好的有层次的去运行
封装的ECharts组件实现了以下的功能:
立即学习“前端免费学习笔记(深入)”;
使用组件传递ECharts中的
option属性手动/自动设置chart尺寸
chart自适应宽高
动态展示获取到的后端数据
本文使用的是vue3 + typescript的写法。
代码实现:
ECharts组件:
ECharts组件的用法:
效果:











