小程序——列表渲染echarts的坑

小程序官方样例，以及百度能搜到的echarts在小程序里使用的样例，都会在Page()之外定义一个chart，用来chart.setOption() 而不必重新setData(ec)。

但是当在组件中使用echarts，且该组件是列表渲染（在父组件中循环子组件），发现子组件中的echart图表会互相影响！
如下：

<view>
  <child wx:for="{{items}}"></child>
</view>

<child>
 <ec-canvas ec="{{ec}}"/>
</child>

child/index.js

let chart // debug后发现多个child组件之间共享chart变量，导致图表无法正确显示
Component({
  properties:{
      ...
    },
  data:{
    ec: {
      onInit: function initChart(canvas, width, height) {
            chart = echarts.init(canvas, null, {
              width,
              height
            })
            canvas.setChart(chart)
            chart.setOption(option)
            return chart[index]
    }}
})

如上图，debug之后发现，在用了echarts的子组件的Component()之外定义的变量chart，会在同页面的同名子组件之间共享，导致图表无法正确显示。

没想到什么好的解决方案，于是把子组件里的变量chart定义为数组，用子组件的index来作为数组下标，每个子组件用chart(index)来接收echarts.init()。规避了无法正确加载图表的问题。
但这不是一个好的解决方式。