美文网首页
echart柱形图结合vue组件实现简单的封装

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

作者: 用技术改变世界 | 来源:发表于2018-12-08 23:26 被阅读0次

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

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

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

    配置项:

    在父组件里绑定数据

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

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

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

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

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

    相关文章

      网友评论

          本文标题:echart柱形图结合vue组件实现简单的封装

          本文链接:https://www.haomeiwen.com/subject/llwchqtx.html