以下是wxml代码和部分js代码，想法是picker来控制两个带canvas的切换显示，但第一次bindPickerChange，setData将index和showFirstContainer都修改了，并且view成功切换，但第二次只修改了index并没有修改showFirstContainer，view没有切换成功，尝试了let that = this但没有成功。

<!--index.wxml-->

<view class="section">

<view class="section__title">您想查看的个人数据</view>

<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">

<view class="picker">

当前选择：{{array[index]}}

</view>

</picker>

</view>

<view class="cagegory-container" wx:if="{{showFirstContainer}}">

<view class="container">

<text>各类新闻观看情况</text>

<ec-canvas id="category-bar" canvas-id="mychart-bar1" ec="{{ ec1 }}"></ec-canvas>

</view>

<view class="container">

<text>各类新闻观看时长占比</text>

<ec-canvas id="category-pie" canvas-id="mychart-pie1" ec="{{ ec2 }}"></ec-canvas>

</view>

</view>

<view class="cagegory-container" wx:if="{{!showFirstContainer}}">

<view class="container">

<text>标题转换新闻观看情况</text>

<ec-canvas id="transform-bar" canvas-id="mychart-bar2" ec="{{ ec3 }}"></ec-canvas>

</view>

<view class="container">

<text>标题转换新闻观看时长占比</text>

<ec-canvas id="transform-pie" canvas-id="mychart-pie2" ec="{{ ec4 }}"></ec-canvas>

</view>

</view>

<!--index.js-->

Page({

onShareAppMessage: function (res) {

return {

title: 'ECharts 可以在微信小程序中使用啦！',

path: '/pages/index/index',

success: function () { },

fail: function () { }

}

},

data: {

showFirstContainer: true,

ec1: {

onInit: initChart1

},

ec2: {

onInit: initChart2

},

ec3: {

onInit: initChart3

},

ec4: {

onInit: initChart4

},

array: ['按类别', '按唤醒度、效价'],

index: 0

},

bindPickerChange: function(e) {

const index = e.detail.value

this.setData({

index: index,

showFirstContainer: index === 0

});

},

onReady: {

}

});