解决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控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
jquery实现的网页自动播放声音
Apr 30 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 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下载excel无法打开的解决方法
2013/12/24 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
JavaScript效率调优经验
2009/06/04 Javascript
JavaScript 动态创建VML的方法
2009/10/14 Javascript
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
Python translator使用实例
2008/09/06 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
Python类反射机制使用实例解析
2019/12/30 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
Python3如何判断三角形的类型
2020/04/12 Python
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
服务行业个人求职的自我评价
2013/12/12 职场文书
升旗仪式主持词
2014/03/19 职场文书
植树节活动总结
2014/04/30 职场文书
简单租房协议书
2014/10/21 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
员工工作表扬信
2015/05/05 职场文书
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python