一種基于canvas與echarts實(shí)現(xiàn)飛線動(dòng)效的方法及系統(tǒng)

基本信息

申請(qǐng)?zhí)?/td> CN202210541889.9 申請(qǐng)日 -
公開(kāi)（公告）號(hào) CN114648603A 公開(kāi)（公告）日 2022-06-21
申請(qǐng)公布號(hào) CN114648603A 申請(qǐng)公布日 2022-06-21
分類號(hào) G06T13/80（2011.01）I;G06F8/34（2018.01）I 分類 計(jì)算；推算；計(jì)數(shù);
發(fā)明人 張俊雷 申請(qǐng)（專利權(quán)）人 杭州比智科技有限公司
代理機(jī)構(gòu) 北京云科知識(shí)產(chǎn)權(quán)代理事務(wù)所（特殊普通合伙） 代理人 -
地址 311121浙江省杭州市余杭區(qū)倉(cāng)前街道倉(cāng)興路1號(hào)23幢2-4樓
法律狀態(tài) -

摘要

摘要 本發(fā)明公開(kāi)了一種基于canvas與echarts實(shí)現(xiàn)飛線動(dòng)效的方法及系統(tǒng)，所述方法包括如下步驟：步驟S1，確定文檔對(duì)象模型的樹(shù)結(jié)構(gòu)，所述樹(shù)結(jié)構(gòu)包括一個(gè)父元素和兩個(gè)子元素；步驟S2，通過(guò)echarts實(shí)例指定可縮放矢量圖形渲染器生成可視化圖表；步驟S3，獲取畫布元素并對(duì)其設(shè)置相對(duì)父元素定位，設(shè)置畫布元素寬高與echarts容器元素的寬高和它們父元素的寬高相同；步驟S4，根據(jù)可伸縮矢量圖形路徑元素獲取飛線軌跡上的點(diǎn)坐標(biāo)的集合；步驟S5，根據(jù)畫布的2D渲染上下文調(diào)用Canvas 2D API繪制圓弧路徑的方法在畫布上繪制360度圓弧并填充顏色；步驟S6,聲明飛線移動(dòng)動(dòng)畫方法，實(shí)現(xiàn)飛線動(dòng)效。本發(fā)明的方法和系統(tǒng)能夠滿足飛線特效的高要求，在數(shù)據(jù)可視化大屏顯示中提升客戶視覺(jué)體驗(yàn)。