echart柱形图结合vue组件实现简单的封装
2018-12-08 本文已影响0人
用技术改变世界
背景:遇到一个需求,在一个组建里面嵌入三个样式一样数据和颜色不一样的柱形图,如果每个柱形图的配置都写一遍的化太多代码重复了,所以我考虑把相同部分封装起来。
第一种方法:以父子组建的形式封装
在子组件里面定义个容器,这里放echart图表
配置项:
在父组件里绑定数据
这样通过父子组建的封装就完成了,如果有不同的需求或者需要封装更多数据可以自己拓展,用法都一样的。
2.直接在组建里面通过封装函数来实现:
刚开始学了点构造函数,所以想用构造函数来实现封装,下面是开始写的代码,有点傻逼(请勿模仿),
后来经过不断的改造后 ,终于可以见人了,下面是全部代码:
附上效果图一张,大家有什么别的想法可以推荐请留言分享下,致谢!