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

基本信息

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

摘要

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