解决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 相关文章推荐
B/S开发中常用javaScript技术与代码
Mar 09 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
JavaScript中的细节分析
Jun 30 Javascript
多个js与css文件的合并方法详细说明
Dec 26 Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
js数组去重的方法汇总
Jul 29 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
JavaScript实现刷新不重记的倒计时
Aug 10 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
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
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
ie focus bug 解决方法
2009/09/03 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
vue界面发送表情的实现代码
2020/09/11 Javascript
Python内置函数的用法实例教程
2014/09/08 Python
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
python basemap 画出经纬度并标定的实例
2019/07/09 Python
在pycharm中实现删除bookmark
2020/02/14 Python
python pip如何手动安装二进制包
2020/09/30 Python
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
什么是唯一索引
2015/07/05 面试题
党校学习心得体会范文
2014/09/09 职场文书
党支部半年考察意见
2015/06/01 职场文书
婚宴来宾致辞
2015/07/28 职场文书
求职自我评价参考范文
2019/05/16 职场文书
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS