react+antd走马灯中使用echarts图表，后面页的图表不渲染的问题 react+antd走马灯中使用echarts图表

{/* 第一页 */} {/* 第二页 */}{/* 第三页 */}

注意看上面组件形式，当三页中都有eCharts图表时，只有第一页的eCharts图表会展示，第二页和第三页以及往后的eCharts图表都不会展示。
问题猜想：
1、可能是第二页和第三页在没有轮播显示时，宽高没有渲染出来，导致的图表渲染失败。
解决方案：把图表渲染容器(如)宽高写死，比如固定 #eChartsWrap {width:300; height:300; }
解决结果：失败。
2、可能是后面页没有轮播渲染之前，eCarts找不到渲染容器，导致的图表渲染失败。
解决方案：按需加载和
解决结果：失败。
浪费了一两个小时也没有解决，乱试了各种方法，无语了。
以下是成功解决方案
使用echarts-for-react
首先 npm i echarts-for-react -S

import React, { useRef } from 'react'; import ReactEcharts from 'echarts-for-react'; // 其中option和eCharts的配置一模一样 // 其他配置也一模一样，参考eCharts官方文档就可以了 { chartRef = e }} option={options} notMerge={true} lazyUpdate={true} style={{width: `200px`,height: `200px`}} />

【react+antd走马灯中使用echarts图表，后面页的图表不渲染的问题】不想浪费时间试错的，可以直接用这种方法解决就行。如果哪位大神有时间研究的话，可以私信。
18937629707。微信同号。