使用：在 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(数据加载完成)，开始正式渲染界面。