近来开发一个小程序的项目，遇到使用setData()始终报错的情况，其问题奇特难解…
一、操作错误截图
如上图，只要将setData放置在回调函数中就会出现异常，如果不放在回调中就正常；
好郁闷，why? 难道是官方的Page.prototype.setData(Object data, Function callback)有问题？这个好像也不太可能。我其他页面也在用呀！
纠结好久，老是报错，一直不明白他为什么要这样对我，麻蛋。
最后将该方法拷贝到其他页面运行测试发现没问题！！！
why？ 这又是唱的哪一出呀？
于是我开始了漫漫排错路
我采用了最简单的排除注释大法
果不其然，很快就定位到了原来是使用echarts （看这篇博客：小程序使用echarts 在一个页面打印多个饼图的坑）留下的祸患
二、错误代码片段
1、初始化echarts
/** * 初始化echats * 使用promise获取初始化echarts 实例 * @return {Object} echart * */ initChart: function (canvas, width, height) { return new Promise(resolve => { const chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chart); chart.setOption(optionConfig); resolve(chart); }); },2、缓存echarts 实例
// 初始化【数据来源echarts】 echartInit_source(e) { this.initChart(e.detail.canvas, e.detail.width, e.detail.height).then(res => { this.data.initchartSource = res; // 判断所以echarts 实例都初始完毕;并且invokePrintPie为false if (this.data.initchartType && this.data.initchartSource && this.data.initchartModel && !this.data.invokePrintPie){ // this.getPieDataAndPrintGraph(); // 打印饼图 this.data.invokePrintPie = true; } return res; }); },根据排查确定错误出在this.data.initchartSource = res;将echarts 实例挂载到data中出的错
该保存echarts 实例目的是为了在后台数据返回后更新option，具体请参考： 小程序使用echarts 在一个页面打印多个饼图的坑
三、问题修复
既然data挂载会异常，那就把它挂载到全局app中去
1、修改后的代码片段
var g_app = getApp();Page({ // 初始化【数据来源echarts】 echartInit_source(e) { this.initChart(e.detail.canvas, e.detail.width, e.detail.height).then(res => { // this.data.initchartSource = res; g_app.source_echart_obj = res; // 判断所以echarts 实例都初始完毕;并且invokePrintPie为false if (g_app.source_echart_obj && g_app.type_echart_obj && g_app.model_echart_obj && !this.data.invokePrintPie){ this.getPieDataAndPrintGraph(); // 打印饼图 this.data.invokePrintPie = true; } return res; }); },})再测试问题解决，OK。
只是最后还是没有弄清楚问题的最终由来，根据如下setData官方对其工作原理的介绍推测应该是echarts 实例中引用 了data实例
然而我们又使用data来挂载echarts 实例，so当在使用setData来更新其他数据时；其js会一层一层根据引用去查找对象，当对象循环被引用就会出现Converting circular structure to JSON
工作原理
小程序的视图层目前使用 WebView 作为渲染载体，而逻辑层是由独立的 JavascriptCore 作为运行环境。在架构上，WebView 和 JavascriptCore 都是独立的模块，并不具备数据直接共享的通道。当前，视图层和逻辑层的数据传输，实际上通过两边提供的 evaluateJavascript 所实现。即用户传输的数据，需要将其转换为字符串形式传递，同时把转换后的数据内容拼接成一份 JS 脚本，再通过执行 JS 脚本的形式传递到两边独立环境。
而 evaluateJavascript 的执行会受很多方面的影响，数据到达视图层并不是实时的。
