Vue复用Echart,动态更新数据视图
2018-09-05 本文已影响571人
羊驼驼驼驼
Echart
![](https://img.haomeiwen.com/i4578791/1e8b0dad7aa6f820.png)
ECharts ,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器。Echart 提供了丰富功能的图表,对于展示数据是不错的选择,并且结合 vue 的组件化,提高echart的复用性。
LOOK 下图:
![](https://img.haomeiwen.com/i4578791/d14def2aea5bc99f.png)
页面有多个统计表,按照之前的写法,就是在methods里面写三个方法,放图:
![](https://img.haomeiwen.com/i4578791/f5d025f7905aaa14.png)
其中有很多复用的代码,所以我们把图表部分封装成一个子组件,在每个需要图表的父组件中调用子组件
如下图:
![](https://img.haomeiwen.com/i4578791/0d4ff297084c9d42.png)
下面我们来看一下代码是如何实现的:
第一步我们要在main.js中把echart引入:
![](https://img.haomeiwen.com/i4578791/2924ebc930dcd54d.png)
第二步我们来编写父组件的代码:
![](https://img.haomeiwen.com/i4578791/c78ec8176f488907.png)
这是父组件的html
![](https://img.haomeiwen.com/i4578791/f2d67b3ca30d9709.png)
引入子组件,在父组件中编写option项的相关数据
![](https://img.haomeiwen.com/i4578791/5956b3779e92dd98.png)
编写refresh函数,实现动态更新数据视图
现在我们已经把图表的配置项放到父组件里,最后通过父组件给子组件传值生成图表。
第三步我们来看一下子组件的代码:
![](https://img.haomeiwen.com/i4578791/53b320f20d4f8bdc.png)
这是子组件的html
![](https://img.haomeiwen.com/i4578791/b127822bfe3abd61.png)
涉及到vue父子组件传值、深度监听有不明白的可以去Vue.js官网进行学习,大家有更好的方法或者问题也欢迎在下面留言,互相学习,共同进步,蟹蟹~~~