taro实战：F2的使用-F2Canvas.fixF2(F2)命

复制使用即可

import Taro, { Component } from "@tarojs/taro";
import { View } from "@tarojs/components";

import { F2Canvas } from "taro-f2";
import F2 from "@antv/f2";

const fixF2 = FF => {
  if (!FF || F2.TaroFixed) {
    return FF;
  }
  if (process.env.TARO_ENV !== "h5") {
    function strLen(str) {
      let len = 0;
      for (let i = 0; i < str.length; i++) {
        if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
          len++;
        } else {
          len += 2;
        }
      }
      return len;
    }
    FF.Util.measureText = function(text, font, ctx) {
      if (!ctx) {
        let fontSize = 12;
        if (font) {
          fontSize = parseInt(font.split(" ")[3], 10);
        }
        fontSize /= 2;
        return {
          width: strLen(text) * fontSize
        };
      }
      ctx.font = font || "12px sans-serif";
      return ctx.measureText(text);
    };
    FF.Util.addEventListener = function(source, type, listener) {
      source.addListener(type, listener);
    };
    FF.Util.getStyle = function(el, property) {
      return el.currentStyle ? el.currentStyle[property] : undefined;
    };
    FF.Util.removeEventListener = function(source, type, listener) {
      source.removeListener(type, listener);
    };
    FF.Util.createEvent = function(event, chart) {
      const type = event.type;
      let x = 0;
      let y = 0;
      const touches = event.touches;
      if (touches && touches.length > 0) {
        x = touches[0].x;
        y = touches[0].y;
      }
      return {
        type,
        chart,
        x,
        y
      };
    };
    if (Taro && Taro.getSystemInfoSync) {
      const systeamInfo = Taro.getSystemInfoSync();
      if (systeamInfo && systeamInfo.pixelRatio) {
        FF.Global.pixelRatio = systeamInfo.pixelRatio;
      }
    }
  } else {
    FF.Global.pixelRatio = window.devicePixelRatio;
  }
  FF.TaroFixed = true;
  return FF;
};

export default class Warn extends Component {


    this.chart.source(, {
      sales: {
        tickCount: 5
      }
    });
  }
  initChart(canvas, width, height) {
    fixF2(F2);

    this.chart = new F2.Chart({
      el: canvas,
      width,
      height
    });
    this.updateChart();
    this.chart.interval().position("month*sales");
    this.chart.render();
    return this.chart;
  }
  render() {
    return (
      <View style='width:100%;height:500px;padding-left:4%;'>
        <F2Canvas onCanvasInit={this.initChart.bind(this)} />
      </View>
    );
  }
}