当前位置: 首页 > 后端技术 > Node.js

React+antdcarousel使用echarts图表,后面页面的图表不渲染

时间:2023-04-03 16:55:16 Node.js

{/*第一页*/}{/*第二页*/}{/*第三页*/}注意上面的组件形式,当三页有eCharts图表时,只会显示第一页的eCharts图表,第二页和第三页pages和未来的eCharts图表将不会显示。问题猜测:1、可能是没有轮播显示时第二页和第三页的宽高没有渲染,导致图表渲染失败。解决方法:硬写图表渲染容器(比如

)的宽高,比如固定#eChartsWrap{width:300;height:300;}求解结果:失败。2、可能是eCarts在后续页面轮播渲染前找不到渲染容器,导致图表渲染失败。解决方案:按需加载解决方案结果:失败。我浪费了一两个小时也解决不了。各种方法都试过了,无语了。下面是先使用echarts-for-react的成功方案npmiecharts-for-react-SimportReact,{useRef}from'react';importReactEchartsfrom'echarts-for-react';//其中,configurationofoption和eCharts完全一样//其他配置也完全一样,参考eCharts官方文档即可{chartRef=e}}option={options}notMerge={true}lazyUpdate={true}style={{width:`200px`,height:`200px`}}/>如果不想浪费时间试错,可以直接用这个方法解决。哪位大神有时间研究,可以私信。亲:如果对您有帮助,请点个赞!!!