react-native 一个页面使用多个Echarts图表 图表总有1、2个不显示 但数据是请求到后才渲染的图表

如下图所示，一共使用了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>

  }

}