解决uCharts图表在微信小程序层级过高问题

uniapp微信小程图表层级过高问题？

项目中涉及 uCharts图表，在 App/H5端均正常使用，微信小程序 存在层级问题！

• 在实现之前，先搜索一翻，说是当弹窗时，把canvas生成图片的方案进行展示，然后我默默测试了~，发现就微信小程序一直报错：【canvasToTempFilePath:fail fail canvas is empty】
• 刚好去做别的项目，今天回来再研究下，发现之前不够仔细，错过了简单便捷的解决方案~~~~；还是多看文档…
• 这里用 uCharts图表，仅供参考

效果图

遇到问题

• 微信小程序：图表层级过高问题
• 微信小程序：里层也需要设置宽高，APP/H5正常

<view class="charts-box">
    <qiun-data-charts
        type="column"
        :opts="opts"
        :chartData="chartData"
        :ontouch="true"
        :tooltipShow="false"
		class="charts-box"
    />
</view>

解决方案

• 开启 2d 模式
• 自定义 canvasId，不能以数字开头、要字符串！

<!-- #ifdef MP -->
<qiun-data-charts
    type="column"
    :opts="opts"
    :chartData="chartData"
    :ontouch="true"
    :tooltipShow="false"
    class="charts-box"
    canvasId="myCanvasId"
    :canvas2d="false" 
/>
<!-- #endif -->

注意：

• 不能用真机调试，请用真机预览模式；（开发者工具显示不正常，图表层级会变高）