钉钉小程序图表刷新 antv-f2

公司有项目拟在钉钉小程序中实现部分功能，其中需要图表展示，经过与echart的比较，最终选择了阿里系的 F2，f2宣传的是“专注于移动，兼容多种环境（Node, 小程序，Weex）”，且有相关支持的文档，没有看到echart对阿里系的小程序支撑。
先上效果图：

钉钉小程序引入F2

首先钉钉小程序如何引入F2图表，点击这里，参考支付宝的内容即可。
f2官方文档点这里
新手建议直接用 npm install @antv/my-f2 的方式引入，不要研究js引入，以及插件化的引入。

一个页面多个图表

我这个程序需要一个页面里有多个图表展示，那么就需要多个 canvas 进行渲染。

图表数据自动刷新

同时，还有需求是点击页签后，图表数据需要刷新，一开始想的是一个页签对应一套图表，页签变化，对应的图表就展示出来，越想这种方式越low，查了半天文档，发现f2 有 chart.changeData(data) 这个方法，马上就上手试一试。问题又来了，点击事件后，如何获取chart 对象，毕竟小程序不像 HTML那么容易通过document进行DOM操作。晚上睡了一觉，第二天突然就想到了全局变量的方式，页面图表init的时候，就把chart 对象赋值给全局对象，页签变动后，直接操作chart对象即可，而且官方API中 chart的所有方法都能用了。
下面直接上代码

页面代码

<!--页签-->
<view class="tabs {
    
    {shadow ? 'shadow' : ''}}" style="top: 0px">
  <view class="tabs-bar">
    <block a:for="{
    
    {tabs}}">
    </block>
  </view>
</view>
<!--多个图表区-->
<view class="container">
  <canvas id="column" onTouchStart="touchStart1" onTouchMove="touchMove1" onTouchEnd="touchEnd1" width="{
    
    {width1}}" height="{
    
    {height1}}" />
</view>
<view class="container">
  <canvas id="pie"  onTouchStart="touchStart2" onTouchMove="touchMove2" onTouchEnd="touchEnd2" width="{
    
    {width2}}" height="{
    
    {height2}}" />
</view>
<view class="container">
  <canvas id="mountNode"  width="{
    
    {width3}}" height="{
    
    {height3}}" onTouchStart="touchStart3" onTouchMove="touchMove3" onTouchEnd="touchEnd3"/>
</view>

JS

import F2 from '@antv/my-f2';
let app = getApp();
let url = app.globalData.url;
// 图表的全局变量
let chart1 = null;
let chart2 = null;
let chart3 = null;

let  data12 = [
    {
   
    year: '圣', sales: 100 },
    {
   
    year: '牌', sales: 10 },
  ];
let  data11 = [
    {
   
    year: '圣', sales: 138 },
    {
   
    year: '牌', sales: 102 },
  ];
let data10 = [
    {
   
    year: '圣', sales: 238 },
    {
   
    year: '牌', sales: 152 },
  ];
let data20 = [
    {
   
    country: '明', population: 1314 },
    {
   
    country: '清', population