uni-app 开发小程序,使用到u-charts.js时会出现弹框或下拉框部分与图标重叠的情况(还有在解决过程中出现 vasToTempFilePath: fail canvas is empty)

如下图,是我用uni-app开发小程序时出现视图与弹框或下拉框重叠的效果图,在微信开发工具上显示正常,但到了真机上就这样.

解决措施:
在小程序中canvas层级过高,导致z-index也无法让弹窗置于视图之上,根据官网提供的两种方法:
方案一是利用cover-view;
方案二是uni.canvasToTempfilepath()将视图转换为图片,显示隐藏;
针对我的项目来说,方案二可行.
我的代码如下:

<template>
	<view>
		<view class="content">
			
			<sl-filter :themeColor="themeColor" :menuList="menuList" @indexState="indexState" @result="result">sl-filter>
		view>
		<view class="qiun-columns">
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
				<view class="qiun-title-dot-light">各线产能view>
			view>
			
			<view class="qiun-charts" :style="{display: imageDisplay}">
				<image :src="imgPath.replace(/[\r\n]/g, '')" :style="{ width: cWidth+ 'px', height: cHeight + 'px' }" />
			view>
			<view class="qiun-charts" :style="{display: canvasDisplay}">
				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA">canvas>
			view>
		view>
	view>
template>

//在这里请记得this指向问题,我这里在created()方法中将this赋给了_self
//以下我只放主要代码块
var _self;
export default {
	data() {
		return {
			imgPath: '',//存放图片地址
			cWidth: '',//画布宽度
			cHeight: '',//画布高度
			imageDisplay: 'none',//图片的display属性 默认隐藏
			canvasDisplay: 'block',//画布的display属性 默认显示(因为我一进页面就要自动调用参数并显示图表)
		}
	},
	created() {
		_self = this;
		//给画布设定宽度高度
		this.cWidth = uni.upx2px(750);
		this.cHeight = uni.upx2px(500);
	},
	methods: {
		//...省略显示视图方法
		indexState(param){
			//这里是下拉 菜单组件  中发射给视图页面的参数
			// showMenuClick(index) {//触发事件
			// 	this.selectedIndex = index;
			// 	if (this.statusList[index].isActive == true) {
			// 		this.$emit("indexState", 'colse');//收缩
			// 		this.$refs.popupRef.close();
			// 		this.statusList[index].isActive = false
			// 	} else {
			// 		this.$emit("indexState", 'open');//展开
			// 		this.menuTabClick(index);
			// 		this.$refs.popupRef.show()
			// 	}
			// },
			//当下拉单点击就将canvas视图转换为图片,并将原本的canvas隐藏
			//原因: 因为canvas在小程序中层级过高,会导致与菜单下拉块重叠
			// 解决措施: this.canvasToImage() 将canvas视图转换为图片,
			 	// 并在不知不觉中替换原本的canvas以蒙混过关,骗过视觉效果,选择下拉参数后或再次点击菜单项后还原原本的canvas
			if(param == 'open'){
				//一定要注意,我这里演示的是进入页面就有视图的情况下,所以我点击下拉菜单就要做处理,根据实际情况来
				this.canvasToImage();//调用函数,将视图转换为图片
				this.imageDisplay = 'block';
				this.canvasDisplay = 'none';
			}else if(param == 'colse'){
				this.imageDisplay = 'none';
				this.canvasDisplay = 'block';
			}else{
				return;
			}
		},
		canvasToImage(){
			uni.canvasToTempFilePath({
				x: 0,//画布x轴起点（默认0）
				y: 0,//画布y轴起点（默认0）
				fileType: 'png',//目标文件的类型，只支持 ‘jpg’ 或 ‘png’。默认为 ‘png’
				width: _self.cWidth,//画布宽度（默认为canvas宽度-x）,这里我自己获取的canvas宽度
				height: _self.cHeight,//画布高度（默认为canvas高度-y）,这里我自己获取的canvas高度
				destWidth: _self.cWidth,//输出图片宽度（默认为width）,这里我自己获取的canvas宽度
				destHeight: _self.cHeight,//输出图片高度（默认为height）,这里我自己获取的canvas宽度
				canvasId: 'canvasLineA',//canvas的 canvas-id属性
				success: function(res) {
					//如果在这里使用this,那指向的就是这个函数,可以打印试一下
					// 在H5平台下，tempFilePath 为 base64
					// console.log(res.tempFilePath)
					_self.imgPath = res.tempFilePath
				},
				fail: function(res) {
					console.log(res);
				}
			}, _self);	//如果控制台报错: vasToTempFilePath: fail canvas is empty ,请记得在这里指向上下文,我这里是_self(因为我上面将this赋给了它)
		}
	}
}

经修改后的效果图:

我这里只处理了折线图的效果,下面柱状图是没处理的.
我这样写的可能还会存在问题,目前能解决我的个人需求,
以上仅供参考,个人笔记~