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()
}
})
}
},
这样就能解决我们的问题了。
如有问题,请留言
本文同步发布在 https://www.cssge.com/
vue 中 echart 在子组件中只显示一次的问题的更多相关文章
- vue.js中父组件触发子组件中的方法
知识点:vue.js中,父组件的method中,触发子组件中的方法,获得子组件中的定义的属性 (1)子组件 : child_crud.js var html_child_crud= "< ...
- Vue(13)子组件与父组件超详细解析
父组件和子组件 我们经常分不清什么是父组件,什么是子组件.现在来简单总结下:我们将某段代码封装成一个组件,而这个组件又在另一个组件中引入,而引入该封装的组件的文件叫做父组件,被引入的组件叫做子组件.具 ...
- vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
- vue 项目, 通知子组件更新,父组件中每次点击按钮重新加载子组件,(重新生成dom 元素)
vue是组件化开发的项目,很多情况下会把公共组件提取出来,来减少代码量,提高开发效率,和以后更好的可维护性.很多情况下,父组件中都会引用子组件这种情况.通过给在父组件中引用的子组件标签上添加属性,来渲 ...
- vue.js 1中父组件跳到子组件中并传参让子组件显示不同的内容
父组件中的点击跳转: <ul class="insurance-entry clearfloat"> <li v-link="{name:'produc ...
- 039——VUE中组件之子组件中data使用实例与text-xtemplate的使用方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue.js 父组件如何触发子组件中的方法
组件 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊 ...
- vue中父组件使用props或者$attras向子组件中传值
知识点:vue中使用props或者$attras向子组件中传值 (1) props传值 子组件必须注册好要传的数据() props:['id'] (2)$attrs传值 该数据在props中,没有注册 ...
- VUe.js 父组件向子组件中传值及方法
父组件向子组件中传值 1. Vue实例可以看做是大的组件,那么在其内部定义的私有组件与这个实例之间就出现了父子组件的对应关系. 2. 父子组件在默认的情况下,子组件是无妨访问到父组件中的数据的,所以 ...
随机推荐
- sklearn使用——梯度下降及逻辑回归
一:梯度下降: 梯度下降本质上是对极小值的无限逼近.先求得梯度,再取其反方向,以定步长在此方向上走一步,下次计算则从此点开始,一步步接近极小值.需要注意的是步长的取值,如果过小,则需要多次迭代,耗费大 ...
- 阿里巴巴JAVA开发手册
Java编程规约 (一)命名风格 1. [强制] 代码中的命名均不能以下划线或美元符号开始,也不能以下划线或美元符号结束. 反例: _name / __name / $O ...
- 干货:Vue粒子特效(vue-particles插件)
转:https://www.jianshu.com/p/53199b842d25 image.png 图上那些类似于星座图的点和线,是由vue-particles生成的,不仅自己动,而且能与用户鼠标事 ...
- D. Concatenated Multiples(离线处理)
思路:直接离线处理出每个ai 的10倍, 100倍, 1000倍的mod k 后的数值的个数,使用map<int,int >ss[12]存储, ss[x][y]表示 (ai*10x)%k= ...
- Linux 实例常用内核网络参数介绍与常见问题处理
本文总结了常见的 Linux 内核参数及相关问题.修改内核参数前,您需要: 从实际需要出发,最好有相关数据的支撑,不建议随意调整内核参数. 了解参数的具体作用,且注意同类型或版本环境的内核参数可能有所 ...
- c# throw和throw ex
c# throw和throw ex 我们在日常开发当中,经常会用到exception异常,并且我们会在exception中的catch块中throw exception,例如: static void ...
- IntelliJ IDEA编译项目报错 "xxx包不存在" 或 "找不到符号"
简介 在维护一个新的项目时出现在的这个情况,项目构建时一直报错"xxx包找不到",但是引用的包和引用的类都是存在的,一开始以为是项目问题,还问了做过的同事,第一次搞好了,但是换了分 ...
- Effective STL 读书笔记
Effective STL 读书笔记 标签(空格分隔): 未分类 慎重选择容器类型 标准STL序列容器: vector.string.deque和list(双向列表). 标准STL管理容器: set. ...
- 采用VSPD、ModbusTool模拟串口、MODBUS TCP设备进行Python采集软件开发
版权声明:本文为博主原创文章,欢迎转载,并请注明出处.联系方式:460356155@qq.com 不少仪器/设备都提供了数据采集的接口,其中不少是串口或网络的MODBUS/TCP协议. 串口是比较简单 ...
- css实现多行文本溢出显示省略号(…)
WebKit浏览器或移动端的页面在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit- ...