如下图所示,一共使用了2个图表(1柱状图、1饼图),正常情况是这样的:
是的,2个图表都出现了,但是有时候图表只展示1个,有时候2个都不展示,如下图:
为什么会出现这种现象?
经排查,由于我们的echarts图表是用webview展示的,并且封装成了一个组件供调用,当多个组件同时调用echarts时,它只能处理一个,于是另外一个就出现渲染不出图表的情况,我称之为“竞引”
如何解决?使用setTimeout延迟另外一个图表的渲染
<DelayChart height={200} delay={250}>
<Charts cellType='pie' chartOption={chartOption} chartHeight={200} />
</DelayChart>
class DelayChart extends Component<{
delay?: number,
height?: number,
}, any> {
state = {
show: false
}
componentDidMount() {
setTimeout(() => {
this.setState({
show: true
})
}, this.props.delay || 500);
}
render() {
let { show } = this.state;
return !show ? <View style={[{ height: this.props.height || 0 }]}></View> : <View>{this.props.children}</View>
}
}