网络编程

解决vue 中 echart 在子组件中只显示一次的问题
网络编程 2025/1/12 佚名
3 2

问题描述

一次项目开发过程中，需要做一些图表，用的是百度开源的 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,echart,子组件
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
www.dyhadc.com 白云城资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
白云城资源网 Copyright www.dyhadc.com