微信小程序使用echarts（ec-canvas）获取接口数据后，手机端页面视图未更新bug

我这里一个页面用了两个echarts，第一个是折线图与柱状图结合，第二个是横向柱状图；

我在js代码中的重要部分加了注释；wxml代码很简单，放在最后；

import * as echarts from '../../components/ec-canvas/echarts';
import { getINCOMETJList } from "../../api/statistics/index";

// 接口拿到数据，页面没更新，需要把chart定义和option定义放到page的外边，代码的前边；
let chart = null 
let chart2 = null 
const option = {
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  toolbox: {
    show: false,
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  legend: {
    data: ['就诊人次', '就诊金额']
  },
  xAxis: [
    {
      type: 'category',
      data: [], // 在需要接口数据的值这里初始给一个空数组，然后获取接口数据后，重新赋值；
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '（人）',
      axisLabel: {
        formatter: '{value} 人',
      }
    },
    {
      type: 'value',
      name: '（元）',
      axisLabel: {
        formatter: '{value} 元'
      }
    }
  ],
  series: [
    {
      name: '就诊人次',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' 人';
        }
      },
      data: [] // 在需要接口数据的值这里初始给一个空数组，然后获取接口数据后，重新赋值；
    },
    {
      name: '就诊金额',
      type: 'line',
      yAxisIndex: 1,
      smooth: true,
      tooltip: {
        valueFormatter: function (value) {
          return value + ' 元';
        }
      },
      data: [] // 在需要接口数据的值这里初始给一个空数组，然后获取接口数据后，重新赋值；
    }
  ]
};

const option2 = {
  title: {
    text: ''
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: [1, 2, 3, 4, 5]
  },
  series: [
    {
      name: '药品',
      type: 'bar',
      data: [] // 在需要接口数据的值这里初始给一个空数组，然后获取接口数据后，重新赋值；
    }
  ]
};

// echart需要初始化，不用赋值；
function initChart(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  return chart;
}

function initChart2(canvas, width, height, dpr) {
  chart2 = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  return chart2;
}

Page({
  data: {
    ec: {
      onInit: initChart
    },
    ec2: {
      onInit: initChart2
    }
  },
  onLoad: function () {
    this.updateData();
  },
  updateData: function() {
   	// 使用接口拿到echarts所需数据
    getINCOMETJList({ ParameterData: ParameterData }).then((res) => {
      console.log(res)
      if(res.Code == 200) {
        const data = res.Data.ReplyData;
        this.setData({,
          Month: data.OPMONTHTJDATA.map(item => item.Month),
          MONTHVISITNUM: data.OPMONTHTJDATA.map(item => item.MONTHVISITNUM),
          MONTHAMT: data.OPMONTHTJDATA.map(item => item.MONTHAMT),
          CHARGEAMT: data.OPMEDICINETOPDATA.map(item => item.CHARGEAMT),
        })
		// 重新赋值，option中初始定义了空数组，在这里给数组赋值；
        option.xAxis.data = this.data.Month
        option.series[0].data = this.data.MONTHVISITNUM
        option.series[1].data = this.data.MONTHAMT
        option2.series[0].data = this.data.CHARGEAMT
		// 给chart图表添加接口返回的数据
        setTimeout(() => {
          chart.clear()
          chart2.clear()
          chart.setOption(option);
          chart2.setOption(option2);
        }, 500);
      }
    })
  }
});

<view class="card">
   <view class="card-content">
     <ec-canvas ec="{{ ec }}" force-use-old-canvas="true"></ec-canvas>
   </view>
 </view>

 <view class="card">
   <view class="card-content">
     <ec-canvas ec="{{ ec2 }}" force-use-old-canvas="true"></ec-canvas>
   </view>
 </view>