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

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

1-解决方式

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

2>以父组件给子组件传值的方式给子组件的图表数据赋值。

import EchartsBar from '@/components/cardReportCharts/index.vue'//父组件的js

<template>
	<view class="charts-box">
		<qiun-data-charts type="bar" :opts="opts" :chartData="scoreList" />
	</view>
</template>
<!-- 子组件的模板内 -->

export default {
	name: 'EchartsBar',
	props: ['scoreList'],
	data() {
		return {
			opts: {....}
		}
	},
	methods:{}
} //子组件的js

3>在父组件中调用子组件里跟转化成json格式的方法

此时要注意，该方法的调用，需要在父组件的vue实例加载完成之后，即

this.$nextTick(function(){})

2-分析原因

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

标签：vue,图表,uchart,组件,给子,方法,弹窗
来源： https://www.cnblogs.com/JUNELITTLEPANDA/p/16305585.html