小程序官方样例,以及百度能搜到的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()
。规避了无法正确加载图表的问题。
但这不是一个好的解决方式。