xioxin / taro-f2 Goto Github PK

drawRadar里面的操作(我执行的onStart)会执行多次，次数好像是根据componentWillMount进入页面的setState有关

import Taro, { Component, Config } from '@tarojs/taro';
import { View } from '@tarojs/components';
import data from '../../data/sroll-line.js';
import { F2Canvas } from 'taro-f2';

const F2 = require('@antv/f2/lib/core'); // 必须引入
require('@antv/f2/lib/geom/interval'); // 引入 interval 几何标记
require('@antv/f2/lib/coord/polar'); // 引入 极坐标
require('@antv/f2/lib/geom/adjust/stack'); // 引入数据层叠调整类型
require('@antv/f2/lib/interaction/');
const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar');
const Tooltip = require('@antv/f2/lib/plugin/tooltip');

F2.Chart.plugins.register([ScrollBar, Tooltip]);

export default class Index extends Component {
  config = {
    navigationBarTitleText: '线图平移交互(长按展示 tooltip)',
    disableScroll: true,
  };

  state = {};

  initChart(canvas, width, height) {
    try {
      // F2Canvas.fixF2(F2);
    } catch (error) {
      console.log('TCL: Index -> initChart -> error', error);
    }
    const chart = new F2.Chart({
      el: canvas,
      width,
      height,
      animate: false,
    });
    chart.source(data, {
      release: {
        min: 1990,
        max: 2010,
      },
    });
    chart.tooltip({
      showCrosshairs: true,
      showItemMarker: false,
      background: {
        radius: 2,
        fill: '#1890FF',
        padding: [3, 5],
      },
      nameStyle: {
        fill: '#fff',
      },
      onShow(ev) {
        const items = ev.items;
        items[0].name = items[0].title;
      },
    });
    chart.line().position('release*count');
    chart
      .point()
      .position('release*count')
      .style({
        lineWidth: 1,
        stroke: '#fff',
      });

    chart.interaction('pan', {
      mode: 'x',
      onEnd(a) {
        console.log('onEnd', a);
      },
      onStart(a) {
        console.log('onStart', a);
      },
    });
    chart.interaction('swipe', {
      speed: 15,
    });
    // 定义进度条
    chart.scrollBar({
      mode: 'x',
      xStyle: {
        offsetY: -5,
      },
    });

    // 绘制 tag
    chart.guide().tag({
      position: [1969, 1344],
      withPoint: false,
      content: '1,344',
      limitInPlot: true,
      offsetX: 5,
      direct: 'cr',
    });
    chart.render();
    return chart;
  }

  render() {
    console.log('FFFF', F2);
    return (
      <View style={{ height: '100%', width: '100%' }}>
        <F2Canvas onCanvasInit={this.initChart.bind(this)}></F2Canvas>
      </View>
    );
  }
}

代码是参考你的 scroll-line目录代码,
版本信息:Taro v1.3.18

taro从1,3,19升级到最近版本1.3.21，编译代码出现异常

Error: Couldn't find preset "@babel/preset-env" relative to directory "D:\\work\\minishopvrm\\node_modules\\@antv\\adjust"
    at C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tarojs\cli\node_modules\babel-core\lib\transformation\file\options\option-manager.js:293:19
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tarojs\cli\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
    at OptionManager.mergePresets (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tarojs\cli\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
    at OptionManager.mergeOptions (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tarojs\cli\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
    at OptionManager.init (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tarojs\cli\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
    at File.initOptions (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tarojs\cli\node_modules\babel-core\lib\transformation\file\index.js:212:65)
    at new File (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tarojs\cli\node_modules\babel-core\lib\transformation\file\index.js:135:24)
    at Pipeline.transform (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tarojs\cli\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
    at transform (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tarojs\cli\node_modules\@tarojs\transformer-wx\lib\src\index.js:172:30)

是我代码的问题吗？求大佬看一下，代码如下
import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { F2Canvas } from 'taro-f2'
import PropTypes from 'prop-types'
import _ from 'lodash';
import { DataSet } from '@antv/data-set';
import F2 from '@antv/f2'

export default class Lines extends Component {

static propTypes = {
data: PropTypes.array,
height: PropTypes.number,
}

static defaultProps = {
data: [],
height: 250,
}

drawArgs = [];

handleInit = (canvas, width, height) => {
this.drawArgs = [canvas, width, height];
if (this.props.data.length) {
this.draw();
}
}

computeTickCount = data => {
let tickLength = 0;
let tmpLabel;
data.forEach(v => {
if (!tmpLabel) {
tmpLabel = v.label;
}
if (v.label === tmpLabel) {
tickLength++;
}
});
const getTickCount = len => {
const isOdd = len % 2 !== 0;
if (len <= 6) return len;
const factor = Math.ceil(len / 6);
while (len % factor) {
len++;
}
let count = len / factor;
if (!isOdd) count--;
return count;
}
return getTickCount(tickLength);
}

draw(data) {
if (!this.drawArgs.length) return;
const [canvas, width, height] = this.drawArgs;

data = data || this.props.data;

this.chart = this.chart || new F2.Chart({
  el: canvas,
  width,
  height
});
const chart = this.chart;
chart.clear(); // 清除

data = this.transform(data);
chart.source(data, {
  x: {
    tickCount: this.computeTickCount(data),
  }
});
/** 如果data为空， chart.get('legendController').legends为空，且不会再更新*/
data.length && chart.tooltip({
  showCrosshairs: true,
  custom: true,
  onChange: obj => {
    const legend = chart.get('legendController').legends.top[0];
    const tooltipItems = obj.items;
    const legendItems = legend.items;
    const map = {};
    legendItems.map(item => {
      map[item.name] = _.clone(item);
    });
    tooltipItems.map(item => {
      const name = item.name;
      const y = item.origin.y;
      if (map[name]) {
        map[name].value = y ? y : '0';
      }
    });
    legend.setItems(_.values(map));
  },
  onHide: () => {
    const legend = chart.get('legendController').legends.top[0];
    legend.setItems(chart.getLegendItems().label);
  }
});
chart.area().position('x*y').color('label');
chart.line().position('x*y').color('label').size(2);
chart.point().position('x*y').color('label');
chart.render();

}

componentWillReceiveProps(nextProps) {
if (nextProps.data !== this.props.data) {
this.draw(nextProps.data);
}
}

transform(data) {
const { alias } = this.props;
const fields = data.length
? Object.keys(data[0]).filter(k => /^y\d+/.test(k))
: ['series1', 'series2'];

const ds = new DataSet();
const dv = ds.createView().source(data);
const fieldMap = fields.reduce((t, v, i) => ({ ...t, [v]: alias[i] }), {});
dv.transform({
  type: 'rename',
  map: fieldMap,
}).transform({
  type: 'fold',
  fields: alias,
  key: 'label',
  value: 'y',
});
return dv.rows;

}

render() {
const { height, data } = this.props
return (

<View style={width:100%;height:${height}px}>
{data.length && }


)
}
}

configuration.module.rules[6].include[0]: The provided value "taro-f2" is not an absolute path!

是用了现在最新的taro创建的
taro版本号：1.3.22
taro-f2: "^2.1.2"
调试项目地址：https://dev.tencent.com/u/heimiao66/p/my-taro-app/git

module "npm/@antv/f2/lib/component/tooltip.js" is not defined
这之类的，经常报找不到文件

报错显示文件taro-f2/dist/h5/index.js 没有引入Taro

组件好像没有暴露可以动态更新图表的props。如何根据网络请求更新当前的图表？

config/index.js

	weapp: {
        module: {},
        compile: {
            include: ['taro-f2']
        }
    }

src/components/line/line.js

import { F2Canvas } from "taro-f2"
import { fixF2 } from "taro-f2/dist/weapp/common/f2-tool.ts"
import F2 from '@antv/f2/lib/core'

错误

编译后的目录

我按照官方的示例使用，结果编译成小程序的时候出现以下错误，请问如何解决？

我的环境：
"dependencies": {
"@antv/f2": "^3.6.0-alpha.1",
"@tarojs/components": "2.0.1",
"@tarojs/components-qa": "2.0.1",
"@tarojs/mobx": "2.0.1",
"@tarojs/mobx-h5": "2.0.1",
"@tarojs/router": "2.0.1",
"@tarojs/taro": "2.0.1",
"@tarojs/taro-alipay": "2.0.1",
"@tarojs/taro-h5": "2.0.1",
"@tarojs/taro-qq": "2.0.1",
"@tarojs/taro-quickapp": "2.0.1",
"@tarojs/taro-swan": "2.0.1",
"@tarojs/taro-tt": "2.0.1",
"@tarojs/taro-weapp": "2.0.1",
"babel-runtime": "^6.26.0",
"mobx": "4.8.0",
"nerv-devtools": "^1.5.5",
"nervjs": "^1.5.5",
"taro-f2": "^2.2.0",
"taro-ui": "^2.2.4"
},
"devDependencies": {
"babel-plugin-transform-runtime": "^6.23.0",
"@types/react": "^16.4.6",
"@types/webpack-env": "^1.13.6",
"@tarojs/mini-runner": "2.0.1",
"@tarojs/webpack-runner": "2.0.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-jsx-stylesheet": "^0.6.5",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-eslint": "^8.2.3",
"eslint": "^5.16.0",
"eslint-config-taro": "2.0.1",
"eslint-plugin-react": "^7.8.2",
"eslint-plugin-react-hooks": "^1.6.1",
"eslint-plugin-import": "^2.12.0",
"stylelint": "9.3.0",
"stylelint-config-taro-rn": "2.0.1",
"stylelint-taro-rn": "2.0.1",
"eslint-plugin-taro": "2.0.1",
"@typescript-eslint/eslint-plugin": "^2.13.0",
"@typescript-eslint/parser": "^2.13.0",
"typescript": "^3.0.1"
}

换了不同项目环境还是编译不成功

JavaScript 环境下

`
配置环境：

"dependencies": {
"@tarojs/components": "2.0.1",
"@tarojs/components-qa": "2.0.1",
"@tarojs/router": "2.0.1",
"@tarojs/taro": "2.0.1",
"@tarojs/taro-alipay": "2.0.1",
"@tarojs/taro-h5": "2.0.1",
"@tarojs/taro-qq": "2.0.1",
"@tarojs/taro-quickapp": "2.0.1",
"@tarojs/taro-rn": "2.0.1",
"@tarojs/taro-swan": "2.0.1",
"@tarojs/taro-tt": "2.0.1",
"@tarojs/taro-weapp": "2.0.1",
"nerv-devtools": "^1.5.5",
"nervjs": "^1.5.5",
"@antv/f2": "^3.5.0",
"taro-f2": "^2.2.0"
},

`

报错：

source.removeEventListener is not a function

Typescript环境下

`
配置环境：

"dependencies": {
"@antv/f2": "^3.4.0",
"@tarojs/async-await": "^1.3.11",
"@tarojs/components": "1.3.5",
"@tarojs/redux": "^1.3.11",
"@tarojs/redux-h5": "^1.3.10",
"@tarojs/router": "1.3.5",
"@tarojs/taro": "1.3.5",
"@tarojs/taro-alipay": "1.3.5",
"@tarojs/taro-h5": "1.3.5",
"@tarojs/taro-swan": "1.3.5",
"@tarojs/taro-tt": "1.3.5",
"@tarojs/taro-weapp": "^1.3.5",
"dva-core": "^1.4.0",
"dva-loading": "^3.0.12",
"nerv-devtools": "^1.4.0",
"nervjs": "^1.4.0",
"redux": "^4.0.4",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"taro-f2": "^2.1.2",
"taro-skeleton": "^1.0.10",
"taro-ui": "^2.2.3",

},
`

报错：

source.removeEventListener is not a function

onCanvasInit 初始化函数是在componentWillMount()前就调用了。如果后续图表有数据更新，不知在哪重绘图表

import Taro, {Component} from '@tarojs/taro'
import {View} from '@tarojs/components'
import {AtAccordion, AtList, AtListItem, AtIcon} from 'taro-ui'

import moment from 'moment'
import {F2Canvas} from "taro-f2";
import F2 from "@antv/f2"
import {getJSON, postJSON} from '../../utils/request'
import api from '../../constants/api'
import Calendar from '../../components/calendar/calendar'
import './index.less'

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 Index extends Component {

  config = {
    navigationBarTitleText: '图表中心'
  }

  constructor() {
    super(...arguments)
    this.state = {
      open: false,
      currentDay: '',
      showCalendar: false,
      marks: [],
      dailyRates: [],
    }
  }


  //incomeRates
  incomeRates(canvas, width, height) {
    fixF2(F2);
    const dailyRates = this.state.dailyRates || [];
    console.log('incomRates = ',dailyRates);
    const chart = new F2.Chart({
      el: canvas,
      width,
      height
    });

    chart.source(dailyRates, {
      total_income: {
        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('day*total_income');
    chart.render();
    return chart;
  }

  onReachBottom() {
    console.log('到底了。。。')
  }

  componentWillMount() {
    console.log(moment().format('YYYY-MM-DD'));
    this.setState({currentDay: moment().format('YYYY-MM-DD')}, async () => {
      let sevenDay = JSON.stringify(this.sevenDayArr(this.state.currentDay));

      let dailyRates = await postJSON(api.getDailyRates, {
        day: sevenDay,
      });

      if (dailyRates.data.status === 'ok') {
        this.setState({
          dailyRates: dailyRates.data.data,
        })
      }
      console.log('res = ', dailyRates.data.data);

      let result = await getJSON(api.dayMarks);
      if (result.data.status === 'ok') {
        this.setState({
          marks: result.data.data,
        })
      }
    })
  }

  componentDidMount() {

  }

  //返回最近7天日期数组
  sevenDayArr(day) {
    let tempArr = [];
    for (let i = 6; i >= 0; i--) {
      tempArr.push(moment(day)
        .subtract(i, 'days')
        .format('YYYY-MM-DD'));
    }

    return tempArr

  }

  showCalendar() {
    // Taro.showToast({
    //   title: '显示日历'
    // })
    this.setState({
      showCalendar: !this.state.showCalendar,
    })
  }

  onDayClick(dayStr) {
    console.log(dayStr)
    // Taro.showLoading();
    this.setState({
      showCalendar: !this.state.showCalendar,
      currentDay: dayStr,
    }, () => {
      getJSON(api.getCommonData, {
        day: this.state.currentDay,
      }).then(res => {
        // if(res.status =='ok'){
        //   this.setState({
        //     marks:res.marks,
        //   })
        // }
      });
    })
  }

  render() {
    const {currentDay, showCalendar, marks, dailyRates} = this.state;
    return (
      <View className='index'>
        <AtList>
          <AtListItem
            title={currentDay}
            onClick={this.showCalendar.bind(this)}
            arrow={showCalendar ? 'up' : 'down'}
            thumb='https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png'

          />
        </AtList>

        {showCalendar ?
          <Calendar marks={marks} currentDay={currentDay} onDayClick={this.onDayClick.bind(this)}/> : null}

        <View style='width:100%;height:300px'>
          {dailyRates && <F2Canvas onCanvasInit={this.incomeRates.bind(this)}></F2Canvas>}
        </View>

      </View>

    )
  }
}

直接用发现报错，调试之后发现是用onInit方法

编译小程序报错, 运行报错为taro-f2的weapp包里找不到index文件。 但是我打开包里看见有个index.ts 我把后缀名改成js命令行里不报错了。小程序里面还是报错找不到index。。

请问，这个函数只执行一次吗，我现在的问题是我页面有搜索条件（日期（年月日）切换），初始化时执行了这个onCanvasInit ，但是我切换日期后，返回了新的data，这个onCanvasInit不会重新执行，数据不会更新，请问这个怎么处理

按照README.md中提供的方法，写了一个范例。
npm run dev:h5的时候提示 Compiled successfully!，
但是控制台打印结果报错：**Taro is not defined** 。
具体报错信息如下：

ReferenceError: Taro is not defined at eval (index.js?bd59:4) at Module../node_modules/taro-f2/dist/h5/index.js (vendors~index_index.js:151) at __webpack_require__ (app.js:767) at fn (app.js:130) at eval (index.js:6) at Module../.temp/pages/index/index.js (index_index.js:11) at __webpack_require__ (app.js:767) at fn (app.js:130) at <anonymous>

请问是什么原因？怎么解决呢？

Cannot read property 'defaultView' of undefined; [Component] Event Listener Error @ npm/taro-f2/dist/weapp/components/f2-canvas/f2-canvas#(anonymous)
TypeError: Cannot read property 'defaultView' of undefined

更新到最新版本， 编辑报错

退回到 1.2.26 就可以了。

module "npm/@antv/f2/npm/@antv/util/lib/to-string" is not defined
Error: module "npm/@antv/f2/npm/@antv/util/lib/to-string" is not defined

"@antv/f2": "^3.5.0",
"taro-f2": "^2.2.0",

请问有没有什么解决方案

我有一个首页其中有柱状图A，由首页进入详情页 有柱状图B，这时会发生 图 B会被图A影响，具体就是 图A的一些属性和方法，在图B实例化后就已经有了 麻烦告知一下解决方法

[`](url

)

因为只需要绘制折线图，引的包太大了，taro-f2 怎么实现按需引用呢?

请问怎样按需引入，现在项目太大了。谢谢

npm ERR! path E:\练习\myWeChat\node_modules.node-sass.DELETE\vendor\win32-x64-72\binding.node
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall unlink
npm ERR! Error: EPERM: operation not permitted, unlink 'E:\练习\myWeChat\node_modules.node-sass.DELETE\vendor\win32-x64-72\binding.node'
npm ERR! [OperationalError: EPERM: operation not permitted, unlink 'E:\练习\myWeChat\node_modules.node-sass.DELETE\vendor\win32-x64-72\binding.node'] {
npm ERR! cause: [Error: EPERM: operation not permitted, unlink 'E:\练习\myWeChat\node_modules.node-sass.DELETE\vendor\win32-x64-72\binding.node'] {
npm ERR! errno: -4048,
npm ERR! code: 'EPERM',
npm ERR! syscall: 'unlink',
npm ERR! path: 'E:\练习\myWeChat\node_modules\.node-sass.DELETE\vendor\win32-x64-72\binding.node'
npm ERR! },
npm ERR! stack: "Error: EPERM: operation not permitted, unlink 'E:\练习\myWeChat\node_modules\.node-sass.DELETE\vendor\win32-x64-72\binding.node'",
npm ERR! errno: -4048,
npm ERR! code: 'EPERM',
npm ERR! syscall: 'unlink',
npm ERR! path: 'E:\练习\myWeChat\node_modules\.node-sass.DELETE\vendor\win32-x64-72\binding.node',
npm ERR! parent: 'myWeChat'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Thinkpad\AppData\Roaming\npm-cache_logs\2019-12-05T08_38_19_313Z-debug.log

我注意到两个问题:

1. npm打包好的dist里的微信代码是ts的，没有经过tsc，导致使用出错
2. 微信小程序对于自定义组件的规范里面规定组件名为小写字母加数字，F2不符合规范

拿 Taro 来开发 支付宝小程序，在 page 里面的直接配置
usingComponents: { 'f2': '@antv/my-f2', }
找不到 f2 这个组件

图标在按照蚂蚁官方文档进行平移处理时，方法报错
`
chart.interaction is not a function; [Component] Event Listener Error @ npm/taro-f2/dist/weapp/components/f2-canvas/f2-canvas#(anonymous)
TypeError: chart.interaction is not a function

chart.scrollBar is not a function; [Component] Event Listener Error @ npm/taro-f2/dist/weapp/components/f2-canvas/f2-canvas#(anonymous)
TypeError: chart.scrollBar is not a function

`

taro版本2.0.0-beta.8
只要含fixF2()这句, 编译H5一定不过, 但微信小程序没问题
项目需要H5, 请大大帮忙看下吧

我希望onCanvasInit 返回this.$scope

在 index.jsx 中引入 fixF2

import { fixF2 } from "taro-f2/dist/weapp/common/f2-tool.ts";

报错如下

./node_modules/taro-f2/dist/weapp/common/f2-tool.ts
Module build failed (from ./node_modules/@tarojs/mini-runner/node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/kedehua/projects_2020/ding-pt-school/node_modules/taro-f2/dist/weapp/common/f2-tool.ts: Unexpected token, expected "," (3:25)

  1 | import Taro from '@tarojs/taro'
  2 | 
> 3 | export function fixF2 (F2: any): any {
    |                          ^
  4 |   if( ( !F2 ) || F2.TaroFixed){return F2}
  5 |   if (process.env.TARO_ENV !== 'h5') {
  6 |     function strLen(str) {

我的项目是不支持ts ，请问各位大佬怎么解决？

ReferenceError: F2Canvas is not defined
请问现在有啥解决方案嘛？

在H5环境下，Tooltip 无法出现。初步怀疑是无法响应到点击事件。

taro版本：v1.2.17
截图：

问题描述

页面A引入 taro-f2 的 F2Canvas 后，使用 Taro.navigateTo 无法跳转到页面B。
不过浏览器地址变了，并且只会变为hash模式的地址，无法变为browser模式的地址（config/index.js配置了h5 router mode 是 browser）。

import { F2Canvas } from "taro-f2";
// xxxx
const goToDetailPage = () => {
  Taro.navigateTo({
    url: "/pages/detail/index"
  });
};
// xxxx
<Button onClick={goToDetailPage}>�查看详情</Button>
<View style='width:100%; height:500px'>
  <F2Canvas onCanvasInit={drawRadar} />
</View>

期望行为

页面跳转正常，无论是hash模式还是browser模式。

报错信息

无报错信息

系统信息

Taro v2.0.2
Taro CLI 2.0.2 environment info:
System:
OS: macOS 10.15.3
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.14.1 - /usr/local/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.13.6 - /usr/local/bin/npm
npmPackages:
@tarojs/components: 2.0.2 => 2.0.2
@tarojs/components-qa: 2.0.2 => 2.0.2
@tarojs/mini-runner: 2.0.2 => 2.0.2
@tarojs/mobx: 2.0.2 => 2.0.2
@tarojs/mobx-h5: 2.0.2 => 2.0.2
@tarojs/router: 2.0.2 => 2.0.2
@tarojs/taro: 2.0.2 => 2.0.2
@tarojs/taro-alipay: 2.0.2 => 2.0.2
@tarojs/taro-h5: 2.0.2 => 2.0.2
@tarojs/taro-qq: 2.0.2 => 2.0.2
@tarojs/taro-quickapp: 2.0.2 => 2.0.2
@tarojs/taro-swan: 2.0.2 => 2.0.2
@tarojs/taro-tt: 2.0.2 => 2.0.2
@tarojs/taro-weapp: 2.0.2 => 2.0.2
@tarojs/webpack-runner: 2.0.2 => 2.0.2
eslint-config-taro: 2.0.2 => 2.0.2
eslint-plugin-taro: 2.0.2 => 2.0.2
nerv-devtools: ^1.5.5 => 1.5.6
nervjs: ^1.5.5 => 1.5.6
stylelint-config-taro-rn: 2.0.2 => 2.0.2
stylelint-taro-rn: 2.0.2 => 2.0.2

补充信息

问题应该出在 node_modules/taro-f2/dist/h5/index.js 这个文件，其中有关于路由的代码。
此文件代码如下：

https://github.com/antvis/wx-f2

最新版已经支持了。

饼图

能完整展现，然后console里输出了最上面的报错信息