微信小程序 canvas 层级问题

微信小程序中，使用canvas层级过高。使用z-index 或 父级高度不会限制他的显示效果。

因为canvas组件是由客户端创建的原生组件，原生组件层级是最高的，所以页面中的其他组件无论设置 z-index 为多少都无法盖在原生组件上。

解决方法：

使用wx.canvasToTempFilePath转为图片，转为图片就能定义层级了

根据图片src来判断是否生成了图片，生成图片后由image 替换canvas

<view >
    <canvas 
            wx:if="{{!src"
            canvas-id="lineChart" 
            disable-scroll="true" 
            class="barCanvas" 
            style="width: 100%;height: 200px;"
    ></canvas>
    <image 
            wx:else
            src="{{src}}" 
            class="barCanvas"
            style="width: 100%;height: 200px;" mode="aspectFill"
    ></image>
</view>

initLine(lineData,lineGraph){
    let that = this    
    new wxCharts({
            background:'#fff',
            canvasId: 'lineChart', 
            type: 'line', // 图表类型，可选值为pie, line, column, area, ring
            categories: lineData.date,
            series: [{ // 数据列表
                    name: lineData.y1Name,
                    data: lineData.y1
            },{ // 数据列表
                    name: lineData.y2Name,
                    data: lineData.y2
            }],
            yAxis: {
                    min: 0 // Y轴起始值
            },
            width: 360,
            height: 200,
            dataLabel: false, // 是否在图表中显示数据内容值
            legend: true, // 是否显示图表下方各类别的标识
            extra: {
                    lineStyle: 'curve' // (仅对line, area图表有效) 可选值：curve曲线，straight直线 (默认)
            }
    })
    setTimeout(()=>{
            wx.canvasToTempFilePath({
                    canvasId: 'lineChart',
                    success: function(res) {
                            that.setData({
                               src: res.tempFilePath
                            })
                    }
            })
    },800)       
}