解决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 相关文章推荐
javascript字典探测用户名工具
Oct 05 Javascript
JS实现随机数生成算法示例代码
Aug 08 Javascript
javascript中动态加载js文件多种解决办法总结
Nov 15 Javascript
thinkphp 表名 大小写 窍门
Feb 01 Javascript
js实现宇宙星空背景效果的方法
Mar 03 Javascript
yarn与npm的命令行小结
Oct 20 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
原生js实现简单的焦点图效果实例
Dec 14 Javascript
VUE+Element环境搭建与安装的方法步骤
Jan 24 Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 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
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
基于PHP创建Cookie数组的详解
2013/07/03 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
载入进度条 效果
2006/07/08 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
centos下更新Python版本的步骤
2013/02/12 Python
python 类详解及简单实例
2017/03/24 Python
python实现Decorator模式实例代码
2018/02/09 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
利用nohup来开启python文件的方法
2019/01/14 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
构造器Constructor是否可被override?
2013/08/06 面试题
中专毕业生自我鉴定
2013/11/21 职场文书
新娘父亲婚礼致辞
2014/01/16 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
行政助理岗位职责
2015/02/10 职场文书
Python实现智慧校园自动评教全新版
2021/06/18 Python
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android
python开发人人对战的五子棋小游戏
2022/05/02 Python