获取chart实例直接报Converting circular structure to JSON

[HuaZaiWuDi]

#Converting circular structure to JSON# 提问前应该做的事

请确保提问前做了以下事，将完成的项目的 [] 改为 [x]：

• [x] 我已通读过 README
• [x] 我已阅读过 FAQ

需提供的信息

将符合项的 [] 改为 [x]，并补充需要的信息：

简单描述问题：

获取chart实例直接报js循环调用异常，压根用不了啊

预期效果：

？？？ （如有需要请提供预期的图）

实际效果：

？？？

（如有需要请提供截图）

复现环境：

• [ ] 在微信开发工具中存在该问题
• [x] 在真机上存在该问题

[HuaZaiWuDi]

是在真机上面出现的，调试工具正常

[HuaZaiWuDi]

真机不打开调试模式，正常，开启调试模式之后就出现问题了

[Ovilia]

官网的例子有这个问题吗？没有的话给个能复现的例子

[tinybright]

用wepy 封装后 会出现这种问题

[Ovilia]

@tinybright wepy 参见 #7

[HEYEggplant]

@Ovilia
已查阅关于echarts issue 了解到关于引入echarts-for-weixin的两种方式 1.利用组件的方式 重写ec-canvas其余和文档保持一致 代码如下：

  <canvas class="ec-canvas" 
    canvas-id="mychart-pie"
    style="width: {{width}};height:{{height}};display:block;">
  </canvas>
</template>

<script>
  import wepy from 'wepy'
  import WxCanvas from '../ec-canvas/wx-canvas'
  import * as echarts from '../ec-canvas/echarts'
  export default class EcCanvas extends wepy.component {
    data = {
      canvasId: 'mychart-pie'
    }

    props = {
      ec: {
        type: Object
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      }
    }

    methods = {
      touchStart(e) {
        if (this.chart && e.touches.length > 0) {
          var touch = e.touches[0]
          this.chart._zr.handler.dispatch('mousedown', {
            zrX: touch.x,
            zrY: touch.y
          })
          this.chart._zr.handler.dispatch('mousemove', {
            zrX: touch.x,
            zrY: touch.y
          })
        }
      },

      touchMove(e) {
        if (this.chart && e.touches.length > 0) {
          var touch = e.touches[0]
          this.chart._zr.handler.dispatch('mousemove', {
            zrX: touch.x,
            zrY: touch.y
          })
        }
      },

      touchEnd(e) {
        if (this.chart) {
          const touch = e.changedTouches ? e.changedTouches[0] : {}
          this.chart._zr.handler.dispatch('mouseup', {
            zrX: touch.x,
            zrY: touch.y
          })
          this.chart._zr.handler.dispatch('click', {
            zrX: touch.x,
            zrY: touch.y
          })
        }
      }
    }

    init(callback) {
      const version = wx.version.version.split('.').map(n => parseInt(n, 10))
      const isValid = version[0] > 1 ||
      (version[0] === 1 && version[1] >= 9) ||
      (version[0] === 1 && version[1] === 9 && version[2] >= 91)
      if (!isValid) {
        console.error('微信基础库版本过低，需大于等于 1.9.91。' +
        '参见：https://github.com/ecomfe/echarts-for-weixin' +
        '#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82')
        return
      }

      const ctx = wx.createCanvasContext(this.canvasId, this)
      const canvas = new WxCanvas(ctx)

      echarts.setCanvasCreator(() => {
        return canvas
      })
      var query = wx.createSelectorQuery()
      // console.log(query.select('.ec-canvas'))
      query.select('.ec-canvas').boundingClientRect(res => {
        if (typeof callback === 'function') {
          this.chart = callback(canvas, res.width, res.height)
        } else if (this.ec && this.ec.onInit) {
          this.chart = this.ec.onInit(canvas, res.width, res.height)
        }
      }).exec()
    }

    onLoad() {
      if (!this.ec) {
        console.warn('组件需绑定 ec 变量，例：<ec-canvas id="mychart-dom-bar" ' + 'canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>')
        return
      }
      if (!this.ec.lazyLoad) {
        this.init()
      }
    }
  }
</script>

<style lang="less">
  .ec-canvas {
    width: 100%;
    height: 100%;
    display: block;
  }
</style>

```<style lang="less">
  @import '../styles/base.less';

  .capital-inflow__wrapper {
    padding: 30rpx;
    .title {
      font-size: 15px;
      color: #fff;
    }
  }
  canvas {
    width: 375px;
    height: 200px;
  }
</style>

<template>
  <view class="capital-inflow__wrapper">
    <ecCanvas :ec.sync="ec" height="200px"></ecCanvas>
  </view>
</template>

<script>
  import wepy from 'wepy'
  import ecCanvas from '../components/ecCanvas'
  import * as echarts from '../ec-canvas/echarts'

  function initChart(canvas, width, height) {
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height
    })
    canvas.setChart(chart)
    const option = {
      grid: [{
        left: 10,
        right: 10,
        bottom: 10,
        top: 196
      }],
      xAxis: {
        data: ['酿酒行业', '家电行业', '保险', '医药制造', '软件服务'],
        axisLabel: {
          textStyle: {
            color: '#fff',
            fontSize: 11
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        }
      },
      yAxis: {
        type: 'value',
        show: !false,
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        }
      },
      series: {
        type: 'bar',
        data: [5, 4, 7, 5, 4],
        label: {
          itemStyle: {
            color: '#fff'
          }
        },
        barWidth: '70%'
      }
    }
    chart.setOption(option)
    return chart
  }

  export default class InfeiCapitalInflow extends wepy.component {
    config = {
    }
    components = {
      ecCanvas
    }
    data = {
      ec: {
        onInit: initChart
      }
    }
    props = {
    }
  }
</script>

 问题：
 微信开发者工具显示效果与手机实际效果不一致
调试工具无问题
真机出现：如上issue 图表实例浮在页面不随页面滚动

2.引入方式二 通过usingComponents 方式引入 其余与文档一致
如下代码：
```<style lang="less">
</style>

<template>
  <view>
    <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ec}}"></ec-canvas>
    <view>{{ec.onInit}}</view>
  </view>
</template>

<script>
  import wepy from 'wepy'
  import * as echarts from '../ec-canvas/echarts'

  export default class Test extends wepy.page {
    config = {
      'usingComponents': {
        'ec-canvas': '../ec-canvas/ec-canvas'
      }
    }
    data = {
      ec: {
        onInit: this.initChart
      }
    }
    components = {
      testprops
    }
    initChart(canvas, width, height) {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      })
      canvas.setChart(chart)
      const option = {
        grid: [{
          left: 10,
          right: 10,
          bottom: 10,
          top: 196
        }],
        xAxis: {
          data: ['酿酒行业', '家电行业', '保险', '医药制造', '软件服务'],
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 11
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          show: !false,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        series: {
          type: 'bar',
          data: [5, 4, 7, 5, 4],
          label: {
            itemStyle: {
              color: '#fff'
            }
          },
          barWidth: '70%'
        }
      }
      chart.setOption(option)
      return chart
    }
    onShow() {
    }
  }
</script>

组件引入成功 但图标实例赋值不成功 即 函数initChart 不执行 ，排查原因为 
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ec}}"></ec-canvas>
props ec 传值时 ec-canvas.js  获取的this.data.ec变成了 ec: {}  所以initChart不成功 图表没被渲染

[Ovilia]

这个问题解决了吗？是否可以关闭？