久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

02
2023/09

echarts簡單自動切換實現(xiàn)

發(fā)布時間:2023-09-02 22:16:17
發(fā)布者:·
瀏覽量:
0

    自動切換是大屏中常用的表現(xiàn)方式,會讓你的頁面表現(xiàn)得沒有那么死板,今天來教給大家一個簡單的自動切換,首先,自動切換其實就是一個定時器,每隔幾秒鐘的時間重新調(diào)用echarts的渲染,通常的接口中可能會包含多條表格數(shù)據(jù),這種情況為了保護內(nèi)存,就不需要多次請求,而有的是每次請求給予一條數(shù)據(jù),這種情況需要多次請求,這里我們以一次請求多條數(shù)據(jù)為例子。

    首先,我們需要請求接口,這里很簡單,可以用ajax

echarts簡單自動切換實現(xiàn).png

    首先 你需要定義一個類似索引值的數(shù)據(jù),并在接口請求成功后把他重新規(guī)定為默認值(這里因為我需要請求這一接口中的其他數(shù)據(jù),如果沒有需要可以不寫),然后觸發(fā)echarts的渲染函數(shù),直接觸發(fā)一次,然后五秒后定時器會開始重復(fù)渲染,注意,定時器一定要先清空一次,防止多個定時器同時進行。

echarts簡單自動切換實現(xiàn) (2).png

    在echarts中,我們每次請求都會把類似索引值加1,當(dāng)他等于不同的值得時候賦予不同的數(shù)據(jù)(這里可以對照自己的接口定義),注意下面的紅框,我們在每次更新數(shù)據(jù)前都需要清空畫布,達到echarts重新加載的效果,頁面就會顯得很生動。

    看一下循環(huán):當(dāng)?shù)谝淮窝h(huán)0→1,然后循環(huán)第二次1→2,2→3,3→4,當(dāng)?shù)谖宕蔚臅r候重新變?yōu)?,并執(zhí)行1次循環(huán)的操作,然后再1→2.....一直循環(huán)下去就能創(chuàng)造出簡單的自動切換效果了。

關(guān)鍵詞:
返回列表