解决vue 中 echart 在子组件中只显示一次的问题


Posted in Javascript onAugust 07, 2018

问题描述

一次项目开发过程中,需要做一些图表,用的是百度开源的 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()
  }
  })
 }
 },

这样就能解决我们的问题了。

Javascript 相关文章推荐
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
JavaScript中闭包的写法和作用详解
Jun 29 Javascript
原生js实现弹出层效果
Jan 20 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 Javascript
react 创建单例组件的方法
Apr 26 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 #Javascript
React-router4路由监听的实现
Aug 07 #Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 #Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 #Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 #Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 #Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 #Javascript
You might like
浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
ajax 文件上传应用简单实现
2009/03/03 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
vue2 中如何实现动态表单增删改查实例
2017/06/09 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
js实现每日签到功能
2018/11/29 Javascript
layer弹出层扩展主题的方法
2019/09/11 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
Python 实现文件的全备份和差异备份详解
2016/12/27 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
对python tkinter窗口弹出置顶的方法详解
2019/06/14 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
python多线程和多进程关系详解
2020/12/14 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
2014年信贷员工作总结
2014/11/18 职场文书
收费员岗位职责
2015/02/14 职场文书
如何写辞职信
2015/05/13 职场文书
农村婚庆主持词
2015/06/29 职场文书
MySQL中的隐藏列的具体查看
2021/09/04 MySQL
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js