使用id挂载echarts图表,每个echarts图表数据给定一个唯一的id。
const lineBoxRef = useRef<any>();
const lineCarouselRef = useRef<any>(null);
// setLineData()存放多个echarts图表数据
const [lineData, setLineData] = useState<any>([]);
const [botClientHeight, setBotClientHeight] = useState<any>([]);
const [botClientWidth, setBotClientWidth] = useState<any>([]);
<div style={{ width: '300px',height: "260px"}} ref={lineBoxRef}>
<Carousel
infinite={false}
ref={lineCarouselRef}
dotPosition={ lineData && lineData.length > 1 ? 'right' : undefined }
autoplay
key={topClientWidth + topClientHeight}
afterChange={(current) => {
if (lineData.length - 1 == current) {
setTimeout(() => {
if (!lineCarouselRef) return;
lineCarouselRef.current?.goTo(0, false);
}, 2000);
}
}}
>
{lineData?.map((item: any) => (
<div key={item.paltoId}>
<div
style={{
width: centerClientWidth,
height: centerClientHeight,
}}
id={'lineChartId' + item.lineId}
></div>
</div>
))}
</Carousel>
</div>
useEffect(() => {
lineData.map((item: any) => {
let rateChart = document.getElementById('lineChartId' + item.lineId);
if (!rateChart) return;
let rateLineChart = echarts.init(rateChart);
if (!rateLineChart) return;
rateLineChart.clear();
rateLineChart.resize();
item && rateLineChart.setOption(item);
});
}, [botClientHeight, botClientWidth]);
// flex布局使用clientWidth,clientHeight获取走马灯父容器宽高
useEffect(() => {
if (!lineData || lineData.length == 0) return;
setBotClientHeight(lineBoxRef.current.clientHeight);
setBotClientWidth(lineBoxRef.current.clientWidth);
}, [lineData]);
// echarts 数据处理
setLineData(echarts数据);