快捷導(dǎo)航

React?+?ECharts動態(tài)折線圖完整實現(xiàn)代碼

更新時間：2026年03月06日 11:11:27 作者：程序媛ing

ECharts作為國內(nèi)最流行的可視化庫,其實內(nèi)置了非常強大的線條特效和動畫能力,這篇文章主要介紹了React + ECharts動態(tài)折線圖的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

初始化階段：創(chuàng)建 ECharts 實例
第一次數(shù)據(jù)加載:填滿180點窗口
定時更新：每3s滑動窗口刪除舊的三個點，添加最新點
圖表渲染只更新坐標(biāo)軸數(shù)據(jù)數(shù)組
圖表自適應(yīng) (ResizeObserver)
圖表初始化渲染（第一次加載數(shù)據(jù)渲染）

總結(jié)

上周項目接到一個新的需求，實現(xiàn)一個每3秒動態(tài)更新數(shù)據(jù) 的折線圖，剛開始有點懵逼了，echarts如何能做成動態(tài)的，最終實現(xiàn)的效果如下：

圖表不斷向左平滑滾動
xAxis 始終保持 180 個點的滑動窗口
第一次加載一批歷史數(shù)據(jù)，之后每 3 秒追加新數(shù)據(jù)
新舊數(shù)據(jù)無縫銜接

實現(xiàn)思路：

初始化階段：創(chuàng)建 ECharts 實例
第一次數(shù)據(jù)加載（loadData）：填滿 180 點窗口
定時更新（smoothAdvance）：每 3 秒滑動窗口
圖表渲染（updateChart）
圖表自適應(yīng)（ResizeObserver）

遇到的問題：

1. 第一次初始化數(shù)據(jù)的最后一個點和后續(xù)第一個點之間斷裂（不連線）

2. 第一次初始化數(shù)據(jù)的最后的連接點跟3s后更新數(shù)據(jù)的第一個點的連接線Tooltip顯示undifiend

代碼實現(xiàn)如下：

初始化階段：創(chuàng)建 ECharts 實例

const initChart = () => {  
    if (!chartRef.current) return;  
    chartInstance.current = echarts.init(chartRef.current);  

    chartInstance.current.setOption({  
        title: {text: labelList.realTime_rx_or_tx_rate, left: "center"},  
        tooltip: {  
            trigger: "axis",  
            formatter: params => {  
               //避免Tooltip顯示undifiend
                const validParams = params.filter(p => p.data != null && !Number.isNaN(p.data));  
                if (!validParams.length) return "";  
                let text = `${params[0].axisValue}
`;  
                validParams.forEach(item => {  
                    text += `${item.marker}${item.seriesName}: ${formatSpeedForStats(item.data, "bit")}
`;  
                });  
                return text;  
            }  
        },  
        grid: {left: 120, right: 20, bottom: 40, top: 80},  
        xAxis: {type: "category", boundaryGap: false, data: []},  
        yAxis: {  
            type: "value",  
            axisLabel: {  
                formatter: value => formatSpeedForStats(value, "bit")  
            },  
            splitLine: {lineStyle: {type: "dashed"}}  
        },  
        series: [  
            {  
                name: labelList.tx,  
                type: "line",  
                smooth: false,  
                showSymbol: false,  
                connectNulls: true,  
                areaStyle: {color: "rgba(0, 180, 0, 0.2)"},  
                lineStyle: {color: "#00c853", width: 2},  
                data: []  
            },  
            {  
                name: labelList.rx,  
                type: "line",  
                smooth: false,  
                showSymbol: false,  
                connectNulls: true,  
                areaStyle: {color: "rgba(0, 102, 255, 0.2)"},  
                lineStyle: {color: "#0066ff", width: 2},  
                data: []  
            }  
        ]  
    });  
};

echarts數(shù)據(jù)處理方法

const processDataPoints = result => {  
    if (!*Array*.isArray(result) || result.length < 2) return {newTimeData: [], newTxData: [], newRxData: []};  

    const newTimeData = [];  
    const newTxData = [];  
    const newRxData = [];  

    for (let i = 1; i < result.length; i++) {  
        const [t2, rx2, , tx2] = result[i];  
        const [t1, rx1, , tx1] = result[i - 1];  

        const txRate = ((tx2 - tx1) * 8) / 1024 / (t2 - t1);  
        const rxRate = ((rx2 - rx1) * 8) / 1024 / (t2 - t1);  
        const timeStr = new *Date*(t2 * 1000).toLocaleTimeString("zh-CN", {hour12: false});  

        newTimeData.push(timeStr);  
        newTxData.push(parseFloat(txRate.toFixed(2)));  
        newRxData.push(parseFloat(rxRate.toFixed(2)));  
    }  

    return {newTimeData, newTxData, newRxData};  
};

第一次數(shù)據(jù)加載:填滿180點窗口

const loadData = async () => {  
    try {  
        const res = await *api*.request({  
            luci: {  
                getRealtimeStats: {mode: "interface", device}  
            }  
        });  

        const result = res?.result;  


        const {newTimeData, newTxData, newRxData} = processDataPoints(result);  

        // 初始化用 NaN 填充，避免折線斷裂  
        const fullTime = *Array*(TOTAL_POINTS).fill("");  
        const fullTx = *Array*(TOTAL_POINTS).fill(*NaN*);  
        const fullRx = *Array*(TOTAL_POINTS).fill(*NaN*);  

        const len = newTimeData.length;  
        const start = TOTAL_POINTS - len;  

        for (let i = 0; i < len; i++) {  
            fullTime[start + i] = newTimeData[i];  
            fullTx[start + i] = newTxData[i];  
            fullRx[start + i] = newRxData[i];  
        }  
        setTimeData(fullTime);  
        setTxData(fullTx);  
        setRxData(fullRx);  
    } catch (err) {  
        *console*.error(err);  
    }  
};

定時更新：每3s滑動窗口刪除舊的三個點，添加最新點

const smoothAdvance = async () => {  
    try {  
        const res = await *api*.request({  
            luci: {  
                getRealtimeStats: {mode: "interface", device}  
            }  
        });  

        const result = res?.result;  
               const {newTimeData, newTxData, newRxData} = processDataPoints(result.slice(-4));  
        setTimeData(prev => {  
            const kept = prev.slice(3);  
            const lastTime = kept[kept.length - 1];
            
            //避免重復(fù)點

            const filtered = newTimeData.filter(t => t !== lastTime);  

            return [...kept, ...filtered];  
        });  
      

        //null值用 NaN 填充，避免折線斷裂 同時避免在連線觸發(fā)tooltip顯示（應(yīng)該在每個點顯示）
      
        setTxData(prev => {  
            const kept = prev.slice(3).map(v => (v == null ? "NaN" : v));  
            return [...kept, ...newTxData];  
        });  

        setRxData(prev => {  
            const kept = prev.slice(3).map(v => (v == null ? "NaN": v));  
            return [...kept, ...newRxData];  
        });  
    } catch (e) {  
        *console*.error("smoothAdvance error:", e);  
    }  
};

圖表渲染只更新坐標(biāo)軸數(shù)據(jù)數(shù)組

const updateChart = (timeArr, txArr, rxArr) => {  
    if (!chartInstance.current) return;  
    chartInstance.current.setOption(  
        {  
            xAxis: {data: timeArr},  
            series: [{data: txArr}, {data: rxArr}]  
        },  
        false  
    );  
};

useEffect(() => {  
    if (chartInstance.current) {  
        updateChart(timeData, txData, rxData);  
    }  
}, [timeData, txData, rxData]);

圖表自適應(yīng) (ResizeObserver)

useEffect(() => {  
    const observer = new ResizeObserver(() => {  
        chartInstance.current?.resize();  
    });  
    if (chartRef.current) observer.observe(chartRef.current);  
    return () => observer.disconnect();  
}, []);

圖表初始化渲染（第一次加載數(shù)據(jù)渲染）

useEffect(() => {  
  if (!chartInstance.current) initChart();  
    loadData();  
    const timer = setInterval(smoothAdvance, 3000);  
    return () => clearInterval(timer);  
}, []);