因为要监听 scroll-view 滚动（echarts图表在scroll-view中），在修改最外层position: absolute; 的定位top时报错
报错信息：
vendor.js?t=wechat&s=1622704591384&v=036732ba2589f032744fcf566a87fc5f:7
TypeError: Converting circular structure to JSON
--> starting at object with constructor 'n'
| property '_chartsViews' -> object with constructor 'Array'
| index 0 -> object with constructor 'n'
| ...
| property 'dom' -> object with constructor 't'
--- property 'chart' closes the circle
at JSON.stringify (<anonymous>)
<template>
<view class="home_content" :class="{'active':active}" :style="{height: height,top:homeTop}">
<scroll-view scroll-y :scroll-top="scrollTop" style="width: 100%;height: 100%;padding: 0 19rpx;box-sizing: border-box;"
@scroll="scroll" @scrolltolower="scrolltolower" @scrolltoupper="scrolltoupper">
<view style="padding-bottom: 60rpx;">
<view class="echart1">
<view class="echart_top">2021年任务完成情况</view>
<view class="echart1_box">
<mpvue-echarts @onInit="setEchart1Box" canvasId="demo-canvas1" ref="mpEchartsOne" />
</view>
<view class="echart2_box_all">
<view class="echart2_box_all_z echart2_box_left">
<mpvue-echarts @onInit="setEchart2Box" canvasId="demo-canvas2" ref="mpEchartsTwo" />
</view>
<view class="echart2_box_all_z echart2_box_middle">
<mpvue-echarts @onInit="setEchart3Box" canvasId="demo-canvas3" ref="mpEchartsThree" />
</view>
<view class="echart2_box_all_z echart2_box_right">
<mpvue-echarts @onInit="setEchart4Box" canvasId="demo-canvas4" ref="mpEchartsFour" />
</view>
</view>
</view>
<view class="echart5">
<view class="echart_top">2021年任务数量趋势</view>
<view class="echart5_box">
<mpvue-echarts @onInit="setEchart5Box" canvasId="demo-canvas5" ref="mpEchartsFive" />
</view>
</view>
</view>
</scroll-view>
</view>
</template>
2 个回复
求松滴萌帮帮忙 (作者)
进一步测试bug 发现只要修改data(){return { }}中定义的值就报错
陌上华年
可以试试 这款https://ext.dcloud.net.cn/plugin?id=4899
另外关于canvas的使用限制可以看看微信官方的说法https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html#%E5%8E%9F%E7%94%9F%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BD%BF%E7%94%A8%E9%99%90%E5%88%B6
求松滴萌帮帮忙 (作者)
谢谢
2021-06-04 10:00
求松滴萌帮帮忙 (作者)
问题依然在而且比之前更严重 滑动的时候canvas漂浮，overflow: hidden;没用，之前的mq还不会漂浮
2021-06-04 10:49
求松滴萌帮帮忙 (作者)
没办法页面就这样 又要position: absolute;还要css的动画效果，还要监听页面滚动 scroll-view，最不让人明白的是为啥会影响到页面渲染，一直报错TypeError: Converting circular structure to JSON
2021-06-04 10:52
陌上华年
回复 求松滴萌帮帮忙: canvas漂浮有可能是父级的或父级的先祖有设置高度100%，而且这种现象只存在微信开发者工具，你可以使用真机预览。
另外，你也可以使用非2d：在标签上加
type=""2021-06-04 10:59
求松滴萌帮帮忙 (作者)
真机直接空白页报错。
我这个小程序使用了自定义底部tab 自定义标题框，导致现在这个问题，感觉是兼容上的问题，TypeError: Converting circular structure to JSON这个报错一直都在直接影响页面渲染
2021-06-04 11:13
陌上华年
回复 求松滴萌帮帮忙: canvas 2d是不支持真机调试的。这个问题是微信的问题。微信官方人员建议使用真机预览。
2021-06-04 11:17
求松滴萌帮帮忙 (作者)
回复 陌上华年: 谢谢，您在使用中有出现过TypeError: Converting circular structure to JSON这个报错吗
2021-06-04 11:29
陌上华年
回复 求松滴萌帮帮忙: 没有，你这是插件引起的？如果是插件引起的加一下Q群1046793420，我看一下
2021-06-04 11:36
求松滴萌帮帮忙 (作者)
回复 陌上华年: 找到原因了 我在data中定义了一个 mpEcharts:{}, 然后this.mpEcharts[lEcharts] = echarts.init(canvas, null, config); 导致vue渲染data得时候深复刻报错
2021-06-04 11:44