东莞市盛裕绒艺玩具有限公司

东莞市盛裕绒艺玩具有限公司

必威体育是做什么的

15190740547
联系方式
全国服务热线: 15190740547

咨询热线:18551979889
联系人:刘俊格
地址:大渡口区新街道翠园路115-68号

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

来源:必威体育是做什么的   发布时间:2019-11-15   点击量:440

问题描述

一次项目开发过程中,需要做一些图表,用的是百度开源的 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: "rgba0, 0, 0.5)" } } }] }; dataSourcePie.setOption(option); window.addEventListener("resize", function() { dataSourcePie.resize(); }); }); } }};</script>

我们发现第一次图表能正常显示,但是页面一刷新或者跳转到其它页面,再返回到该页面,图表就不显示了。

原因

自己当时没有想那么多为什么无法加载,因此在另一个父组件进行应用的时候,他是首屏就加载,数据不变动。

但是当数据变动之后,无法自动的更新图表。

由于 mounted 只会在挂载的时候执行一次,因此无法后续进行更新

解决办法

通过 watch 进行图表的更新

watch: { pieData() { this.$nextTick(() => { if (this.pieData) { this.init() } }) } },

这样就能解决我们的问题了。如有问题,请留言

本文同步发布在 https://www.cssge.com/

相关产品

COPYRIGHTS©2017 必威体育是做什么的 ALL RIGHTS RESERVED 备案号:440