ucharts在微信小程序中， canvas组件层级最高的问题处理

ucharts在微信小程序中， canvas组件层级最高的问题处理

在用ucharts做微信小程序的时候，发现生成的图表，层级是最高的，其他组件，比如弹窗，表头等，都会被图表覆盖，问题如下：

无论如何修改侧面弹窗和图标的 z-index属性都是无效的，canvas组件是原生组件，在微信小程序中，原生组件的层级默认最高。
查到的处理方案是，待生成的图表渲染完成后，将图表转换为图片，然后放置在原来图表的位置，当然，然来图表有的一些属性，比如点击可查看提示详情等功能就失效了，所以要尽量把要显示的数据默认显示出来再转为图片。
基础图表的实现就不写了，可以直接访问ucharts官网，有具体的方法，问题处理的流程：

1.将图表移出可视区域

因为图表需要渲染出来备用，所以图表需要显示，但是由不能显示在页面上，所以需要把图表移出可视区域。
view 代码
下面展示一些 内联代码片。

<!-- 折线图 -->
		<view class="qiun-columns">
				<view class="qiun-charts margin-bottom ">
					<canvas  canvas-id="canvasLineA" id="canvasLineA" disable-scroll=true class="charts" @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA">
					</canvas>
					<image :src="imgSrc" style="width: 750upx;height: 500upx;"></image>
				</view>
			</view>

css代码：

<style scoped>
	canvas{
	    position: absolute;
	    width: 100%;
	    right: -900px;
	    top: -600px;
	}
</style>

uniapp中设置 canvas属性的样式，可能会污染其他页面或组件的样式，所以单独给他配一个style标签用 scoped限制。
如此，图表就移出了图表了。显示的效果，只有一个白色底图。

##监控图表渲染完成，将图表转换成图片方法如下：
在showLineA(canvasId,chartData){}方法里，canvaLineA=new uCharts({});方法下面，增加监控图表渲染完成的方法：

showLineA(canvasId,chartData){
...其他代码...
	canvaLineA=new uCharts({
	...其他代码...
	});
	canvaLineA.addEventListener('renderComplete', () => {//监控图表渲染完成
						setTimeout(function(){//延迟一定时间执行
							uni.canvasToTempFilePath({//将图表转成图片
								x: 0,
								y: 0,
								width: _self.cWidth*_self.pixelRatio,
								height: _self.cHeight*_self.pixelRatio,
								fileType:'png',
								canvasId: 'canvasLineA',
								success: function(res) {
								  _this.imgSrc=res.tempFilePath;
								 },
								 fail:function(res){
								 }
							},_this);
						},100);
				});
},

将图片转换后的图片路径，res.tempFilePath赋值给自己定义的图片路径。
官方里面图片转换是没有 setTimeout这个方法的，可能是canvaLineA.addEventListener这个方法执行的跟转换图片的方法太贴近，如果不延时执行图片转换的方法的话，真机调试的情况下，有时候，图片没有渲染好，图片样式会乱，或者压根就显示不出来图片，延时100毫秒就好很多，不行的话还可以适当延长。


我只是截了两个异常样式，还有各种可能，反正就是样式乱了。
加了 settimeout最终结果：


还有一个问题，ucharts图表在不转换图片的情况下，在微信模拟器中不能正常显示，只显示白色底图，所以做小程序的图表，直接真机调试就行了，反正最后还是要在手机上运行的。