在 react 中 用echarats

在 react 中 用echarats ,用原生的方法写如下:

   

也可以用 react 的写法:

在写的过程中遇到一个问题:刚开始用的一个  renderSaleAnalyseChart 这个方法,然后在 render 中调,然后在保存  这个 echarts 中的数据的时候出现了问题,销售列表发生两段数据值。

在这里要注意,因为 render 中是不能有 setState 这个写法的。所以,我们可以在生命周期中写,不需要在这个render 中调用方法。(componentWillReceiveProps(nextprops)。

为什么这个上y轴上的列表数据值不对呢?

错误效果图:

错误代码:

正确代码:

首次进入组件的时候,this.props里面有个loading状态,一开始可以不用全部渲染出去,就先让渲染个loading状态的界面就好了,然后等componentWillReceiveProps的时候,更新了新的数据,loading false的时候,你就可以渲染整个新的界面了。

这个是redux里面定义的。

就是你dispatch的时候,redux会给你个状态,  loading true基本上就是表示在加载, loading false就是加载完成,或者加载失败,这个根据数据来判断的。

所以你组件是直接从dispatch上拿的数据,也就是redux里面,则首次只需要渲染个loading状态的组件(去ant找),当loading false(数据加载完成),开始正式渲染界面。

猜你喜欢

转载自blog.csdn.net/u013592575/article/details/81873229