国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

當(dāng)前位置:首頁(yè)  >  技術(shù)干貨  > echarts更新數(shù)據(jù)不重繪

echarts更新數(shù)據(jù)不重繪

來(lái)源:千鋒教育
發(fā)布人:xqq
時(shí)間: 2023-11-23 14:34:27 1700721267

一、基本概念

echarts是百度開(kāi)源的一個(gè)專注于數(shù)據(jù)可視化的圖表庫(kù)。在使用echarts進(jìn)行動(dòng)態(tài)數(shù)據(jù)展示時(shí),經(jīng)常需要更新圖表的數(shù)據(jù)。更新數(shù)據(jù)時(shí),可以使用setOption方法重新渲染整個(gè)圖表,也可以使用一些更靈活的方法避免重繪整個(gè)圖表而只更新部分?jǐn)?shù)據(jù)。這些方法包括數(shù)據(jù)動(dòng)態(tài)修改、動(dòng)態(tài)增加數(shù)據(jù)、異步加載數(shù)據(jù)、基于時(shí)間軸更新數(shù)據(jù)等等。這些方法的使用可以提高數(shù)據(jù)展示的效率和用戶體驗(yàn),減小對(duì)服務(wù)器的負(fù)載。

二、數(shù)據(jù)動(dòng)態(tài)修改

數(shù)據(jù)動(dòng)態(tài)修改是一種直接修改echarts實(shí)例的數(shù)據(jù)option的方式。我們可以通過(guò)創(chuàng)建echarts實(shí)例時(shí)的option中的series數(shù)組中對(duì)應(yīng)的數(shù)據(jù)項(xiàng)進(jìn)行修改。如下例所示,我們更新了第一個(gè)系列的第一個(gè)數(shù)據(jù)項(xiàng)的value的值。修改后的數(shù)據(jù)能夠自動(dòng)更新到圖表中。


var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'line'
    }]
};

// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);

option.series[0].data[0] = 150; // 修改第一個(gè)系列的第一個(gè)數(shù)據(jù)項(xiàng)的值

myChart.setOption(option); // 更新圖表

三、動(dòng)態(tài)增加數(shù)據(jù)

動(dòng)態(tài)增加數(shù)據(jù)是指在已有的數(shù)據(jù)集之上增加新的數(shù)據(jù),而不是替換原有的數(shù)據(jù)集。我們可以通過(guò)調(diào)用setOption方法來(lái)實(shí)現(xiàn)動(dòng)態(tài)增加數(shù)據(jù)。添加數(shù)據(jù)時(shí),需要將新的數(shù)據(jù)添加到對(duì)應(yīng)系列的data數(shù)組中。如下例所示,我們添加了一條新的線性數(shù)據(jù)到第一個(gè)系列的data數(shù)組末端。添加后的數(shù)據(jù)能夠自動(dòng)更新到圖表中。


var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'line'
    }]
};

// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);

option.series[0].data.push(90); // 向第一個(gè)系列的data末尾添加一個(gè)數(shù)據(jù)

myChart.setOption(option); // 更新圖表

四、異步加載數(shù)據(jù)

異步加載數(shù)據(jù)是指在數(shù)據(jù)加載完成之后,再將數(shù)據(jù)渲染到圖表中。異步加載數(shù)據(jù)主要應(yīng)用于處理大量數(shù)據(jù)或者需要對(duì)數(shù)據(jù)進(jìn)行篩選處理的情況。我們可以使用異步加載數(shù)據(jù)源并處理數(shù)據(jù)后再渲染圖表。具體實(shí)現(xiàn)可以使用echarts提供的ajax組件或者其他異步加載方式。如下例所示,我們使用了ajax組件加載數(shù)據(jù)源,然后對(duì)數(shù)據(jù)進(jìn)行處理,最后將處理后的數(shù)據(jù)渲染到圖表中。


$.get('data.json').done(function (data) {
    // 對(duì)數(shù)據(jù)進(jìn)行處理
    var processedData = processData(data);

    var option = {
        xAxis: {
            type: 'category',
            data: processedData.categories
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: processedData.data,
            type: 'line'
        }]
    };

    // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
    myChart.setOption(option);
});

五、基于時(shí)間軸更新數(shù)據(jù)

基于時(shí)間軸更新數(shù)據(jù)是指在圖表已有基礎(chǔ)上,根據(jù)時(shí)間軸變化來(lái)更新圖表數(shù)據(jù)。我們可以使用echarts提供的時(shí)間軸組件對(duì)數(shù)據(jù)進(jìn)行更新。可以使用時(shí)間軸組件提供的多種方式進(jìn)行數(shù)據(jù)的更新,如單擊時(shí)間點(diǎn),拖動(dòng)時(shí)間軸,自動(dòng)播放等等。如下例所示,我們使用下方的時(shí)間軸對(duì)圖表中的數(shù)據(jù)進(jìn)行了更新。


var option = {
    baseOption: {
        timeline: {
            data: ['2014', '2015', '2016', '2017', '2018', '2019'],
            loop: false,
            autoPlay: false,
            currentIndex: 0,
            playInterval: 1000,
            controlStyle: {
                position: 'left'
            }
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'line',
            name: '2014'
        }, {
            data: [150, 220, 170, 90, 80, 120, 150],
            type: 'line',
            name: '2015'
        }, {
            data: [180, 230, 190, 100, 90, 130, 170],
            type: 'line',
            name: '2016'
        }]
    },
    options: [{
        title: {
            text: '2014年數(shù)據(jù)'
        },
        series: [{
            name: '2014'
        }]
    }, {
        title: {
            text: '2015年數(shù)據(jù)'
        },
        series: [{
            name: '2015'
        }]
    }, {
        title: {
            text: '2016年數(shù)據(jù)'
        },
        series: [{
            name: '2016'
        }]
    }]
};

// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);

myChart.on('timelinechanged', function (params) {
    var currentIndex = params.currentIndex;
    var series = option.baseOption.series;
    for (var i = 0, l = series.length; i < l; i++) {
        series[i].data = timelineData[currentIndex].data[i];
    }
    myChart.setOption(option);
});

聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請(qǐng)您保持通訊暢通,專屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT