解决vue 中 echart 在子组件中只显示一次的问题
2018-08-07 10:29
956 查看
问题描述
一次项目开发过程中,需要做一些图表,用的是百度开源的 echarts。 vue推荐组件化开发,所以就把每个图表封装成子组件,然后在需要用到该图表的父组件中直接使用。
实际开发中,数据肯定都是异步获取的。所以我们在 mounted 生命周期中获取数据。对vue生命周期不熟悉的,可以去看一下我之前写一篇文章vue2.0项目实战(4)生命周期和钩子函数详解
由于父组件请求的数据并不是一成不变的,会根据不同的条件请求不同的数据,此时需要图表进行更新。
代码示例
在父组件中
// Main.vue <template> <div> ... <Pie :pieData="fullList"></Pie> ... </div> </template> <script> import Pie from 'components/SourcePie' export default { components: { Pie }, data(){ return { fullList:{} } }, mounted() { this._fullQuantity() }, methods: { _fullQuantity(){ // axios... } } } </script>
在父组件中,通过api接口获得的数据传递给子组件。那么我们在子组件中:
// SourcePie.vue <template> <div style="width:300px;height:260px" id="data_source_con" v-if="pieData"></div> </template> <script> import echarts from 'echarts'; export default { name: 'dataSourcePie', data() { return { // }; }, props: { pieData: Object }, mounted() { this.init() }, methods: { init() { let _this = this; this.$nextTick(() => { var dataSourcePie = echarts.init(document.getElementById('data_source_con')); const option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)", position: ['50%', '50%'] }, series: [{ name: '实体统计', type: 'pie', radius: '50%', center: ['50%', '60%'], data: [{ value: _this.pieData.videoNum, name: '影视数据' }, { value: _this.pieData.albumNum, name: '专辑数据' }, { value: _this.pieData.songNum, name: '歌曲数据' }, { value: _this.pieData.novelNum, name: '小说数据' }, { value: _this.pieData.presonNum, name: '人员数据' } ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] }; dataSourcePie.setOption(option); window.addEventListener('resize', function() { dataSourcePie.resize(); }); }); } } }; </script>
我们发现第一次图表能正常显示,但是页面一刷新或者跳转到其它页面,再返回到该页面,图表就不显示了。
原因
自己当时没有想那么多为什么无法加载,因此在另一个父组件进行应用的时候,他是首屏就加载,数据不变动。
但是当数据变动之后,无法自动的更新图表。
由于 mounted 只会在挂载的时候执行一次,因此无法后续进行更新
解决办法
通过 watch 进行图表的更新
watch: { pieData() { this.$nextTick(() => { if (this.pieData) { this.init() } }) } },
这样就能解决我们的问题了。
您可能感兴趣的文章:
相关文章推荐
- 解决vue-router进行build无法正常显示路由页面的问题
- vue 2.0 第一个坑,组件不显示的问题
- 解决使用Vue.js显示数据的时,页面闪现原始代码的问题
- 如何解决easyui-datagrid分页组件中文显示的问题
- 解决Vue.js由于延时显示了{{message}}引用界面的问题
- 解决vue项目中type=”file“ change事件只执行一次的问题
- vue遇到过的坑(父组件向输入框组件传值进去,然后子组件利用传进来的数据进行数据绑定的问题与解决方法)
- 解决vue同一slot在组件中渲染多次的问题
- 解决代码着色组件SyntaxHighlighter行号显示问题
- 解决ToolTip 只显示一次问题
- android在根布局组件设置背景不显示的问题解决
- H5开发中android端echart图表显示黑屏问题解决方法
- 解决echart在IE中使用时,在div中加入postion后图表不显示问题
- 解决vue中无法动态修改jqgrid组件 url地址的问题
- 关于CListCtrl控件更新Item的闪烁问题和一次插入大容量数据的显示问题解决办法
- 学习vue框架,遇见router-view标签无法显示的问题解决
- vue解决未编译显示问题
- 基于vue 添加axios组件,解决post传参数为null的问题
- 解决ios微信下vue项目组件切换并自动播放音频问题
- 解决“UIkit与Vue.js结合使用时,UIkit的图标会显示两个”的问题