1987WEB视界-分享互联网热点话题和事件

您现在的位置是:首页 > WEB开发 > 正文

WEB开发

uni-app项目|在弹窗中引入uchart图表子组件不显示

1987web2024-03-25WEB开发33
为了解决uchart作为子组件在主组件里引用但不显示的情况,(同样适用于弹窗之中)目前有三种方法。1-解决方式1>如果你使用的uchart子组件是从官方拿的例子:

为了解决uchart作为子组件在主组件里引用但不显示的情况,(同样适用于弹窗之中)目前有三种方法。 1-解决方式 1>如果你使用的uchart子组件是从官方拿的例子:进入到uchart子组件将onReady或者onLoad(){}的方法的名字换成mounted。 2>以父组件给子组件传值的方式给子组 ...

为了解决uchart作为子组件在主组件里引用但不显示的情况,(同样适用于弹窗之中)目前有三种方法。

1-解决方式

1>如果你使用的uchart子组件是从官方拿的例子:进入到uchart子组件将onReady或者onLoad(){}的方法的名字换成mounted。

2>以父组件给子组件传值的方式给子组件的图表数据赋值。(官方不推荐的方式)

这种方式会使 chartData 原型链上增加额外的属性或方法,最终导致这些多余的属性或方法传入 uCharts 组件,带来预料不到的问题。实际上官方甚至都不推荐将uchart作为多层套娃的子组件。

class="charts-box"> type="bar":opts="opts":chartData="scoreList"/>
exportdefault{name:EchartsBar,props:[scoreList],data(){return{opts:{....}}},methods:{}}//子组件的js

3>在父组件中调用子组件里跟转化成JavaScript 对象的方法

这种方法可以对整体赋值,并且采用深拷贝的方式,这种方式对数据需要动态变更的情况下很友好。此时要注意,该方法的调用需要在父组件的vue实例加载完成之后,即在nextTick方法之中调用。对于子组件调用还有什么疑问可以参考这篇文章:使用 Vue.js 怎么调用其他组件的方法

this.$nextTick(function(){this.$refs.echartsbar.getServerData()});

2-分析原因

之所以要这么大费周章,是因为在本人的尝试中,官方给的例子中onReady和onLoad方法均没有执行(不知是何缘故),当引入图表作为子组件时,就会一直显示加载页面而不显示数据并且也不报错。

官方的文档写的十分详细,有问题尽可能参考:uchart官方文档

声明:本站所有文章,如无特殊说明或标注,均为爬虫抓取以及网友投稿,版权归原作者所有。