小程序ucharts层级过高如何解决-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序ucharts层级过高如何解决。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

uniapp小程序ucharts层级过高

为什么canvas组件总是会在最上层？
由于canvas组件是原生组件，原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上
在页面出现点击事件，存在弹框，ucharts的图层会会出现在弹框上层，ucharts的图层事件会超过弹框事件，导致样式出现问题。
可以在弹框显示的时候，将ucharts图形，转换称图片的形式显示。
使用v-show的方式，切换显示。从而不会出现层级的问题。
部分代码如下，不可以直接运行

<view class="charts-box">
					 <canvas v-show="!BugShow" canvas-id="drawxychartsmonth" id="drawxychartsmonth" class="charts" @touchend="tap"/>
					  <image v-show="BugShow" :src="canvasImg" style="width: 650rpx; height: 300rpx;" />
					</view>

//这里的 750 对应 css .charts 的 width
		this.cWidth = uni.upx2px(600);
		//这里的 500 对应 css .charts 的 height
		this.cHeight = uni.upx2px(300);

 drawCharts(id,data){
		      const ctx = uni.createCanvasContext(id, this);
			  var that=this;
		      uChartsInstance[id] = new uCharts({
		        type: "area",
		        context: ctx,
		        width: this.cWidth,
				canvas2d:true,
				canvasId: id,
		        height: this.cHeight,
		        categories: data.categories,
		        series: data.series,
		        animation: true,
		        background: "#FFFFFF",
				dataLabel:false,
		        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
		        padding: [15,0,0,0],
		        legend: {
					show:false,
				},
		        xAxis: {
		          disableGrid: true,
				  boundaryGap:'justify',
				  fontSize:"10",
				  formatter: function (value, index,opts) {
					  if(index=='0' || index==(opts.categories.length-1)){
						return value;  
					  }else{
						  return ""
					  }	
				  },
				  axisLabel: {//x轴文字的配置
				              show: true,
				              interval: 0,//使x轴文字显示全
				             }
		        },
		        yAxis: {
				  type: "value",
		          gridType: "solid",
				  axisTick: {
				              inside: true
				          },
				  scale: true,
				  data:[
					  {
						fontSize:"10",
						formatter: function (value, index,opts) {
							if(that.tipType=="2"){
								 return formatAmount(value, 4)
							}else if(that.ischartsPro){
							  return formatAmount(value, 3) + '%'	
							}else{
								return formatAmount(value, 4)
							}
						}, 
					  }
				  ],
				  axisLabel: {
				         margin: 2,
						 show: true,
				        },
		        },
				grid: { x: 45, y: 20, x2: 16, y2: 8, width: 'auto', height: 'auto', left: '20%' },
		        extra: {
				  tooltip:{
					  showBox:true,
					  showArrow:false,
					  borderRadius:5,
					  fontColor:"#4f9acc",
					  bgOpacity:"1",
					  bgColor:"#ffffff",
					  borderWidth:"1",
					  borderColor:"#7698ad",
					  labelBgColor: "#FFFFFF",
				  },
		          area: {
		            type: "curve",
		            opacity: 0.5,
		            addLine: true,
		            width: 2,
		            gradient: true,
		            activeType: "hollow"
		          },
		        }
		      });
		    },

  tap(e){
			  var that=this;
		      uChartsInstance[e.target.id].touchLegend(e);
		      uChartsInstance[e.target.id].showToolTip(e,{
					formatter: (item, category, index, opts) => {
					  if(that.tipType=="1" && that.ischartsPro){
						return "自定义/"+item.name + ":" + formatAmount(item.data, 3)+ '%' +'/'+'日期'+ ":" +category;
					  }else{
						return "自定义/"+item.name + ":" + formatAmount(item.data, 4) +'/'+'日期'+ ":" +category;
					  }
					
					}
				  });
		    },

// 需要让 弹窗等 出现在canvas上的事件
		handleCanvarToImg() {
		  var that=this;
		  uni.canvasToTempFilePath({
		    x: 0,
		    y: 0,
		    width: 650,
		    height: 300,
		    canvasId: 'drawxychartsmonth',
		    success: function(res) {
		      that.canvasImg=res.tempFilePath;
		    }
		  });
		},```

文章来源地址https://www.toymoban.com/news/detail-532371.html

到了这里，关于小程序ucharts层级过高如何解决的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！