Antv F2图表点击出现抖动、空白、重叠解决方案
2021-08-06 15:19:28
# 问题：Antv F2图表点击出现抖动、空白、重叠解决方案
# 原因：数据(data)发生改变，重新new F2 的时候，之前的内容没清空导致的
# 解决方案：chart.clear()清除内容，重新绘制
```
import React, {Component} from "react";
import F2 from "@antv/f2";
import dayjs from "dayjs"
import "./style.less"
class Line extends Component {
static defaultProps = {
data: [],
};
// 属性（props） 发生改变的时候调用
componentWillReceiveProps(nextProps) {
// 检查数据判断是否发生变化，变化就清除内容，重新渲染图表
if (JSON.stringify(nextProps.data) !== JSON.stringify(this.props.data)) {
this.chart.clear();
this.initDraw(nextProps.data);
}
}
// 装载完成,在render之后调用
componentDidMount() {
this.initDraw(this.props.data);
}
// 初始化图表
initDraw = (data) => {
if (!data) {
return
}
// 因为首位和末位时间相同，但是图标会自动合并，所以给最后一位添加了一个空格
for (let i = 0; i < data.length; i++) {
data[i].date = dayjs("1990-01-01 " + data[i].date).format("HH:mm")
if (i === (data.length - 1)) {
data[i].date = data[i].date + " "
}
}
const chart = new F2.Chart({
id: 'lineChart',
pixelRatio: window.devicePixelRatio
});
// 将chart 赋值给this.chart ,仅能通过这种方式去判断chart是否存在
this.chart = chart;
chart.source(data, {
value: {
tickCount: 6, // todo
min: 0
},
date: {
range: [0, 1],
tickCount: 6
}
});
chart.axis('date', {
label: function label(text, index, total) {
const textCfg = {};
if (index === 0) {
textCfg.textAlign = 'left';
} else if (index === total - 1) {
textCfg.textAlign = 'right';
}
return textCfg;
}
});
chart.line().position('date*value').style({
lineWidth: 3,
stroke: '#5c7bd9',
});
chart.point().position('date*value').style({
stroke: '#5c7bd9',
lineWidth: 2,
fill: '#fff',
});
chart.render();
};
render() {
return (
<React.Fragment>
{/*产值汇总图表*/}
<div className={'chart'}>
<div className={'title'}>{this.props.title}</div>
<div className={'canvas'}>
<canvas id="lineChart"/>
</div>
</div>
</React.Fragment>
);
}
}
export default Line
```