echart柱形图结合vue组件实现简单的封装

背景:遇到一个需求,在一个组建里面嵌入三个样式一样数据和颜色不一样的柱形图,如果每个柱形图的配置都写一遍的化太多代码重复了,所以我考虑把相同部分封装起来。

第一种方法:以父子组建的形式封装

在子组件里面定义个容器,这里放echart图表

配置项:


在父组件里绑定数据


这样通过父子组建的封装就完成了,如果有不同的需求或者需要封装更多数据可以自己拓展,用法都一样的。


2.直接在组建里面通过封装函数来实现:

刚开始学了点构造函数,所以想用构造函数来实现封装,下面是开始写的代码,有点傻逼(请勿模仿),


后来经过不断的改造后 ,终于可以见人了,下面是全部代码:


附上效果图一张,大家有什么别的想法可以推荐请留言分享下,致谢!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 12,971评论 2 59
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,018评论 3 119
  • 脚气一直以来就困扰着很多人,为了能够治愈脚气,想尽了办法,但是都起不到良好的效果,脚气不能彻底根治,还会反复发作。...
    蔚蓝dajd阅读 270评论 0 0