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

 更新时间:2018年08月07日 10:29:07   作者:_marven  
vue推荐组件化开发,所以就把每个图表封装成子组件,然后在需要用到该图表的父组件中直接使用。接下来给大家介绍vue 中 echart 在子组件中只显示一次的问题,需要的朋友参考下吧

问题描述

一次项目开发过程中,需要做一些图表,用的是百度开源的 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打包添加gzip配置项方式

    vue打包添加gzip配置项方式

    这篇文章主要介绍了vue打包添加gzip配置项方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue.js中ref及$refs的使用方法解析

    vue.js中ref及$refs的使用方法解析

    这篇文章主要介绍了vue.js中ref及$refs的使用方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • vue之如何配置默认显示页面和默认路由

    vue之如何配置默认显示页面和默认路由

    这篇文章主要介绍了vue之如何配置默认显示页面和默认路由问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • Vue中使用Printjs插件实现打印功能

    Vue中使用Printjs插件实现打印功能

    Print.js 主要是为了帮助我们直接在我们的应用程序中打印 PDF 文件,无需离开界面,也无需使用嵌入,这篇文章主要介绍了Vue中使用Printjs插件实现打印功能,需要的朋友可以参考下
    2022-08-08
  • vue3修改link标签默认icon无效问题详解

    vue3修改link标签默认icon无效问题详解

    这篇文章主要介绍了vue3修改link标签默认icon无效问题详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • VUE在线调用阿里Iconfont图标库的方法

    VUE在线调用阿里Iconfont图标库的方法

    这篇文章主要介绍了VUE在线调用阿里Iconfont图标库的方法,内容是围绕VUE前端和阿里Iconfont图标库展开的,经历了从网站上东拼西凑图标的时代,大概是15~16年左右我开始解除阿里Iconfont图标库,刚开始就只会下载图标使用,需要的朋友可以参考下
    2021-10-10
  • Vue如何循环提取对象数组中的值

    Vue如何循环提取对象数组中的值

    这篇文章主要介绍了Vue如何循环提取对象数组中的值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-11-11
  • Vue 过滤器filters及基本用法

    Vue 过滤器filters及基本用法

    这篇文章主要介绍了Vue 过滤器filters的实例代码以及vue过滤器的基本用法,需要的朋友可以参考下
    2017-12-12
  • vue下使用nginx刷新页面404的问题解决

    vue下使用nginx刷新页面404的问题解决

    这篇文章主要介绍了vue下使用nginx刷新页面404的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • Vue3.x最小原型系统讲解

    Vue3.x最小原型系统讲解

    这篇文章主要介绍了Vue3.x最小原型系统讲解。既然用Vue3.0构建最小原型系统,那么肯定要用尤大的最新构建工具Vite来进行项目的初始化,下文举例说明,需要的朋友可以参考一下
    2022-02-02

最新评论