taro图表taro-f2报错处理, ’source.removeEventListener is not a function‘

2,021 阅读3分钟

最近taro升级到了V2.0 版本,发现之前写的taro图表taro-f2页面报错了,多方查找终于啊!

直接看报错

项目taro版本

"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"
  },
  

之前写法报错代码:


import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.scss'

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

export default class Index extends Component {


drawRadar(canvas, width, height){

  // ⚠️ 别忘了这行
  // 为了兼容微信与支付宝的小程序,你需要通过这个命令为F2打补丁
 
  F2Canvas.fixF2(F2);
 
  const data = [
    { name: '超大盘能力', value: 6.5 },
    { name: '抗跌能力', value: 9.5 },
    { name: '稳定能力', value: 9 },
    { name: '绝对收益能力', value: 6 },
    { name: '选证择时能力', value: 6 },
    { name: '风险回报能力', value: 8 }
  ];
  const chart = new F2.Chart({
    el: canvas,
    width,
    height
  });
  chart.source(data, {
    value: {
      min: 0,
      max: 10
    }
  });
  chart.coord('polar');
  chart.axis('value', {
    grid: {
      lineDash: null
    },
    label: null,
    line: null
  });
  chart.axis('name', {
    grid: {
      lineDash: null
    }
  });
  chart.area()
    .position('name*value')
    .color('#FE5C5B')
    .style({
      fillOpacity: 0.2
    })
    .animate({
      appear: {
        animation: 'groupWaveIn'
      }
    });
  chart.line()
    .position('name*value')
    .color('#FE5C5B')
    .size(1)
    .animate({
      appear: {
        animation: 'groupWaveIn'
      }
    });
  chart.point().position('name*value').color('#FE5C5B').animate({
    appear: {
      delay: 300
    }
  });
  chart.guide().text({
    position: ['50%', '50%'],
    content: '73',
    style: {
      fontSize: 32,
      fontWeight: 'bold',
      fill: '#FE5C5B'
    }
  });
  chart.render();
}

render () {
  
  return (
    <View className='index'>
      <Text>F2 图表</Text>
      {/* F2 */}
      <View style='width:100%;height:500px'>
        <F2Canvas onCanvasInit={this.drawRadar.bind(this)}></F2Canvas>
      </View>
    </View>
  )
}
}

运行直接报错 TypeError: source.removeEventListener is not a function

目前最好的方法就是把fixF2方法放入自己的代码里来解决

解决方案


import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.scss'

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

<!--把fixF2方法放入自己的代码里-->

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 {


  drawRadar(canvas, width, height){

    // ⚠️ 别忘了这行
    // 为了兼容微信与支付宝的小程序,你需要通过这个命令为F2打补丁
    
    //这里是错的❌
    // F2Canvas.fixF2(F2);  
   
   
   // 这里是对的✅
     fixF2(F2);
     
    const data = [
      { name: '超大盘能力', value: 6.5 },
      { name: '抗跌能力', value: 9.5 },
      { name: '稳定能力', value: 9 },
      { name: '绝对收益能力', value: 6 },
      { name: '选证择时能力', value: 6 },
      { name: '风险回报能力', value: 8 }
    ];
    const chart = new F2.Chart({
      el: canvas,
      width,
      height
    });
    chart.source(data, {
      value: {
        min: 0,
        max: 10
      }
    });
    chart.coord('polar');
    chart.axis('value', {
      grid: {
        lineDash: null
      },
      label: null,
      line: null
    });
    chart.axis('name', {
      grid: {
        lineDash: null
      }
    });
    chart.area()
      .position('name*value')
      .color('#FE5C5B')
      .style({
        fillOpacity: 0.2
      })
      .animate({
        appear: {
          animation: 'groupWaveIn'
        }
      });
    chart.line()
      .position('name*value')
      .color('#FE5C5B')
      .size(1)
      .animate({
        appear: {
          animation: 'groupWaveIn'
        }
      });
    chart.point().position('name*value').color('#FE5C5B').animate({
      appear: {
        delay: 300
      }
    });
    chart.guide().text({
      position: ['50%', '50%'],
      content: '73',
      style: {
        fontSize: 32,
        fontWeight: 'bold',
        fill: '#FE5C5B'
      }
    });
    chart.render();
  }

  render () {
    
    return (
      <View className='index'>
        <Text>F2 图表</Text>
        {/* F2 */}
        <View style='width:100%;height:500px'>
          <F2Canvas onCanvasInit={this.drawRadar.bind(this)}></F2Canvas>
        </View>
      </View>
    )
  }
}


页面显示效果

希望对你有用。ღ( ´・ᴗ・` )