react+antd走马灯中使用echarts图表,后面页的图表不渲染的问题
<Carousel autoplay>
{/* 第一页 */}
<FirstPage />
{/* 第二页 */}
<SecondPage />
{/* 第三页 */}
<ThirddPage />
</Carousel>
注意看上面组件形式,当三页中都有eCharts图表时,只有第一页的eCharts图表会展示,第二页和第三页以及往后的eCharts图表都不会展示。问题猜想:1、可能是第二页和第三页在没有轮播显示时,宽高没有渲染出来,导致的图表渲染失败。解决方案:把图表渲染容器(如<div id="eChartsWrap"></div>)宽高写死,比如固定 #eChartsWrap {width:300; height:300;}解决结果:失败。2、可能是后面页没有轮播渲染之前,eCarts找不到渲染容器,导致的图表渲染失败。解决方案:按需加载<SecondPage />和<ThirddPage />解决结果:失败。浪费了一两个小时也没有解决,乱试了各种方法,无语了。以下是成功解决方案使用echarts-for-react首先 npm i echarts-for-react -S
import React, { useRef } from 'react';
import ReactEcharts from 'echarts-for-react';
// 其中option和eCharts的配置一模一样
// 其他配置也一模一样,参考eCharts官方文档就可以了
<ReactEcharts
ref={e => {
chartRef = e
}}
option={options}
notMerge={true}
lazyUpdate={true}
style={{width: `200px`,height: `200px`}}
/>
不想浪费时间试错的,可以直接用这种方法解决就行。如果哪位大神有时间研究的话,可以私信。
亲:如果对您有帮助,麻烦点个赞!!!
转载自:https://segmentfault.com/a/1190000041688377