最近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>
)
}
}
页面显示效果
希望对你有用。ღ( ´・ᴗ・` )