使用id掛載echarts圖表，每個echarts圖表數(shù)據(jù)給定一個唯一的id。


           const lineBoxRef = useRef<any>();
           const lineCarouselRef = useRef<any>(null);

            // setLineData()存放多個echarts圖表數(shù)據(jù)
           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 數(shù)據(jù)處理
  setLineData(echarts數(shù)據(jù));