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

admin2024-04-03  0

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

文章目录

    • uniapp微信小程图表层级过高问题?
      • 效果图
      • 遇到问题
      • 解决方案

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

效果图

解决uCharts图表在微信小程序层级过高问题,在这里插入图片描述,第1张


遇到问题

  • 微信小程序:图表层级过高问题
  • 微信小程序:里层也需要设置宽高,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 -->

注意:

  • 不能用真机调试,请用真机预览模式;(开发者工具显示不正常,图表层级会变高)
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!