父子组件当中，父组件调接口传值到子组件，初始情况下图表不显示（echarts）

最新推荐文章于 2024-03-19 20:20:10 发布
最新推荐文章于 2024-03-19 20:20:10 发布
阅读量467 收藏 3
点赞数 3
分类专栏： vue中写echarts 父组件调用子组件的方法 文章标签： vue echarts Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63633861/article/details/128911449
版权
在初始化阶段，若只显示部分数据，可考虑在子组件内部添加定时器来延迟加载剩余数据。如果一秒的延迟不够，可以适当增加定时器时间，确保更流畅的用户体验。
摘要由CSDN通过智能技术生成

我初始化是只展示一部分，这时候我们给子组件里面展示数据的部分加一个定时器就好了

如果定时器写的一秒还是不行的话，就往大写几秒

一笔浓墨画佳人
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue+echarts 父子组件传值及同页面使用一个组件绘制多个图表的案例（按需引入）
又青_CSDN的博客
04-29 990
vue+echarts 父子组件传值及同页面使用一个组件绘制多个图表的案例（按需引入） 最终的效果图，还需要做一些视觉效果，只需要在子组件里面编写就可以 子组件内容 v-bind:id就是绑定id，从父组件获得不同的id，不然id相同echarts画图时无法识别图表就显示不出来。ref绑定data用于同一个页面可以重复调用子组件，以便获得不同的data。 <!-- 子组件.vue --> <template> <div class="echarts"> &l
Vue封装ECharts组件实现动态复用
qq_39064418的博客
03-31 1563
(ps: 给个✨star✨吧~~)
Vue解决报错11_父组件使用子组件的echarts折线图不能显示（父组件传值慢于子组件初始化导致）
xiaosi的博客
11-07 1373
一、问题描述 父组件发送请求获取数据，然后父组件传值给子组件的折线图，但是发现子组件显示空白，尽管在mounted()已经使用赋值了 // 填充数据 initData() { this.optionValue.series = this.value.series; this.optionValue.xAxis = this.value.xAxis; }, 使用log日志查看赋值并未生效 this.chartLine = echarts.init(document
关于echart-for-react在antd组件中初始化不展示的问题
weixin_44627459的博客
12-12 731
echart-for-react在antd中初始化不显示图表问题
vue中tab切换子组件echarts不显示
weixin_44614177的博客
06-30 932
在父组件(index.vue)默认activeName是first，打开页面就只显示first组件的图表，切换tab到其他子组件就不会显示图表。我的解决办法是再el-tab-pane中动态传activeName给子组件，通过tab-click动态获取当前activeName， 以second.vue组件为例，通过props在每一个子组件中接收，在子组件中监听activeName， 最后在每一个图表的获取方法后添加this.$nextTick(()=>{myChart.resize(..
vue中用watch监听父组件向子组件动态传递的数据时第一次不能加载的问题
yjyRain的博客
11-11 3156
问题：最近在使用vue做项目时，遇到一个关于子组件用props接收父组件传递过来的数据进行页面渲染时第一次打开数据不能加载的问题，我的子组件是一个对话框，第一次打开对话框时不能加载到父组件传递的数据，关闭后从新打开数据才能加载。刚开始我的方法如下： 父组件： 子组件：使用watch来响应数据的变化，普通的监听方式，使用写一个监听函数，这种方式在对话框第一次打开的时候无法加载到数据。 后来采用hander+immediate的方式，改变watch的监听方法，将immediate设置为true，就可以实现我
请求来数据echart图形不显示
陈新科的博客
04-29 3565
问题描述 调试代码的时候数据已经请求成功，而且打印对象里面的属性，数据是有的，但是图表就是没展示 问题分析 想要解决这个问题就要彻底了解什么是异步请求和什么是同步请求 同步请求，客户端向服务端发送请求，服务端响应以后客户端才渲染页面 异步请求，客户端向服务端发送请求，客户端不等服务端响应就行行页面渲染，一般做页面的局部刷新。 那么造成上面原因就是我的页面向服务端发送请求，页面不等服务端响应就已经渲染图表，尽管后面数据请求成功但此时页面已经渲染成功，页面此时只知道他所渲染图表时数据为空，所以不会显示
vue父组件给子组件传值，子组件不渲染的原因及解决方法
预见的力量
01-05 2884
父组件传递给子组件的数据，如果是一个复杂对象（例如一个数组或对象），那么子组件只会监听对象的引用而不是对象的内容。这意味着当对象的内容发生变化时，子组件不会更新。3、数据发生变化后，在下面调用一下splice方法修改原数组长度（索引、截取长度都为0），数组不变，但视图可成功渲染。1、在子组件使用 watch 监听 props传过来的值，如果发现改变，调用forceUpdate刷新视图。2、父组件中声明一个布尔变量，数据发生变化后，切换一下变量状态，可刷新子组件视图。
解决vue一个页面中复用同一个echarts组件的问题
01-19
因为页面中要用echarts图表的地方比较多，所以封装了组件，方便复用，如图： 我需要这样一个饼图，并且接下来在很多次地方要用到。 直接复制官网的代码，再改改数据，需要用的时候直接拿来用。 但是接下来出现了一...
vue-echarts动态调整
xiaoxiaoxiaopb的博客
07-06 760
vue3整合echarts 动态调整 前言 本文主要适用于vue2、vue3 对Echarts进行整合，动态跟随的方法， 以及防抖功能的实现 环境：vue3，Echarts：4.9.0 提示：以下是本篇文章正文内容，下面案例可供参考 一、使用步骤 1.依赖安装 代码如下（示例）： npm install echarts@4.9.0 -S 2. App.vue的html 为Echarts提供一个可依赖的Element，里面的参数于data进行绑定，可为数据实时展示提供基础 <div
vue父组件传递props异步数据到子组件遇到的问题，前端程序员春招三面蚂蚁金服
最新发布
2401_83620690的博客
03-19 911
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。前端面试题汇总定的人。
父传子 props 父子传参有时候不显示 父子子传参渲染不出来 this.$set()；
weixin_50885665的博客
05-13 273
export default { name: 'BackToTop', props: { list1: { type: Array, default() { return [] } }, list1Title: { type: String, default: 'list1' }, info: { type: Object, defau.
在子组件中使用Echarts图表无法刷新显示的问题（解决：子组件刷新）
黑胡子大叔的博客
04-12 2113
场景问题 在项目中，子组件中使用了Echarts的图表，图表的数据需要从父组件传入Id来进行查询，墒情仪与气象站相同的结构，当切换设备时，图表无法回显，父子组件传值正常。 解决心路历程 1、我将两种设备传值的Id分开传递，处理无果 2、给子组件赋key，每次点击设备标识 key++，修订成功 <template v-if="instrumentValue == 0 && facilityId != ''"> <Soil
父组件传值给子组件，Echarts图表不刷新/渲染的问题
H_T_M的博客
11-02 2472
背景：最近刚上手一个项目用到了大量的图表，刚开始用的是子数据，所以没有出现情况，联通后端接口之后，在父组件请求数据并传值给子组件，遇到了数据接受了，但是图表没有重新渲染的问题。 父组件 //父组件中引用图表 <template slot="content-layout-1"> <Pie :pie_percent="pie_percent"></Pie> </template> <script&gt..
vue echarts初始化失败
qq_64436918的博客
05-16 1267
方法一 有可能组件是在赋值前挂载的所以导致渲染不出来，如果是想请求接口后赋值给图表然后把图渲染出来，可以在请求接口的then里调用方法。 赋值后调用echarts。 方法二 可以在mounted里调用echarts。 方法三 可以使用watch方法监听值的变化来调用echarts 总结:在请求接口的then里调用echarts比较简单，感觉也没什么问题。 ...
vue2ehcarts图的父子组件异步数据显示不出来的问题
sdf2365317413的博客
10-17 231
为了解决这个问题，子组件用watch检测父组件传来的数据，有改变在进行渲染。因为异步加载问题，子组件第一次渲染的是父组件传来的空列表。
echarts封装组件-解决界面不显示数据问题
BUG小太阳
06-20 1234
需求：首页显示多种类型的统计图（封装多个组件方便后续使用） 问题：数据获取后无法渲染到界面（ vue axios属于异步加载数据） 解决：利用watch，监控数据变化，根据变化调用渲染echarts的方法 参考： 按需引入： 一、创建组件(components/charts/lineArea.vue) // echarts按需引入 <template> <div ref="dom"></div> </template> <script&g.
echarts树图图标修改成图片以及自定义图片首次加载不显示的问题的修改＜js＞
笑到世界都狼狈的博客
08-25 5286
首先看一下显示效果，如下图所示： 1.首先修改图片，在option对象中加入 下方代码就可实现图片的修改，但是存在bug symbol:'image://https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3857605647,1610745729&fm=26&gp=0.jpg',//修改图片 symbolSize: [30, 30],//修改图片大小 2.图片修改后，只有点击节点的时候才会显示图片，刚加载进去不显
Vue中父组件向子组件echarts传值问题
imkaifan的博客
03-17 1528
问题描述： vue中子组件是echarts图表，父组件向子组件利用props传值，值传递过去了，但是，echarts不渲染。 问题现象再深一层次： 数据没有驱动试图 解决办法： 用v-if进行一个渲染判断 上代码： 父组件 <template> <div class="putongradar_container"> <div class="container_left"> <div class="title">{{ zonghNengl
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值