在组件中使用F2报错 about wx-f2 HOT 14 CLOSED

 getStyle: function getStyle(el, property) {
    return el.currentStyle ? el.currentStyle[property] : document.defaultView.getComputedStyle(el, null).getPropertyValue(property);
  },

import F2 from '../../../f2-canvas/lib/f2';

let chart = null;

function initChart(canvas, width, height) { // 使用 F2 绘制图表
  // const data = [
  //   { year: '1956', sales: [34,42] },
  //   { year: '1957', sales: 43 },
  //   { year: '1958', sales: 48 },
  //   { year: '1959', sales: 54 },
  //   { year: '1960', sales: 75 },
  //   { year: '1962', sales: 170 },
  // ];
  const data = [{
    name: 'London',
    月份: 'Jan.',
    月均降雨量: 18.9
  }, {
    name: 'London',
    月份: 'Feb.',
    月均降雨量: 28.8
  }, {
    name: 'London',
    月份: 'Mar.',
    月均降雨量: 39.3
  }, {
    name: 'Berlin',
    月份: 'Jan.',
    月均降雨量: 99.7
  }, {
    name: 'Berlin',
    月份: 'Feb.',
    月均降雨量: 52.6
  }, {
    name: 'Berlin',
    月份: 'Mar.',
    月均降雨量: 35.5
  }];
  chart = new F2.Chart({
    el: canvas,
    width,
    height
  });
  chart.source(data);
  // chart.source(data, {
  //   value: {
  //     tickCount: 5
  //   }
  // });
  chart.tooltip({
    showItemMarker: false,
    onShow(ev) {
      const { items } = ev;
      items[0].name = null;
      items[0].name = items[0].title;
      items[0].value = '¥ ' + items[0].value;
    }
  });
  //chart.interval().position('year*sales');
  chart.interval().position('月份*月均降雨量').color('name').adjust({
    type: 'dodge',
    marginRatio: 0.05 // 设置分组间柱子的间距
  });
  chart.render();
  return chart;
}
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    items: [1, 2, 3, 4, 5],
    opts: {
      onInit: initChart
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
   
  }
})

{
  "component": true,
  "usingComponents": {
    "ff-canvas": "/../../../f2-canvas/f2-canvas"
  }
}

<view class="container">
    <block wx:key='id' wx:for='0'>
      <ff-canvas class='aa' height='220px' width='123px' canvas-id="column" opts="{{ opts }}"></ff-canvas>
      <view class='split'>测试一下</view>
    </block>
</view>

{
  "usingComponents": {
    "x-column": "/components/charts/x-column/index"
  }
}

<view class="item">
      <x-column></x-column>
</view>

query.select('.f2-canvas').boundingClientRect(res => {
        console.log(canvas);
        console.log(res);
        if (typeof callback === 'function') {
          this.chart = callback(canvas, res.width, res.height);
        } else if (this.data.opts && this.data.opts.onInit) {
          this.chart = this.data.opts.onInit(canvas, res.width, res.height);
        }
      }).exec();
    },

bottom
:
493
dataset
:
{}
height
:
0
id
:
""
left
:
31
right
:
383
top
:
493
width
:
352