[發明專利]利用vue繪制svg圖表的方法、裝置、計算機設備和存儲介質

有效

• 申請號: 201910972611.5
• 申請日: 2019-10-14
• 公開（公告）號: CN110781653B
• 公開（公告）日: 2023-06-30
• 發明（設計）人: 黃文輝;楊成穎;孫遷
• 申請（專利權）人: 蘇寧云計算有限公司
• 主分類號: G06F40/174
• 分類號: G06F40/174;G06T13/80
• 代理公司: 南京理工大學專利中心 32203
• 代理人: 馬魯晉

1.一種利用vue繪制svg圖表的方法，其特征在于，包括以下步驟：

搭建漸進式vue框架；

分別封裝若干圖表基礎組件和若干圖表容器，由此構建圖標庫；

定義所述圖標庫中每個圖表基礎組件和每個圖表容器各自的控制參數；

接收用戶圖表樣式需求，根據所述需求分別配置圖表基礎組件和圖表容器；

封裝所配置的圖表基礎組件和圖表容器，并將圖表數據傳入圖表容器，構建圖表并將該圖表展示給用戶；

接收用戶的圖表交互請求，根據所述交互請求處理所述圖表；

在所述將該圖表展示給用戶之前，還包括：根據用戶圖表動畫需求，配置圖表動畫效果，對圖表所在視區進行渲染；

所述根據用戶圖表動畫需求，配置圖表動畫效果，包括：

封裝常規圖表動畫效果以及通過FLIP方案新增的圖表動畫效果；

定義上述圖表動畫效果的控制參數；

所述用戶圖表動畫需求為常規的圖表動畫效果，選取上述封裝的圖表動畫效果；所述用戶圖表動畫需求為自定義圖表動畫效果，配置所述圖表動畫效果的控制參數構建新的圖表動畫效果。

2.根據權利要求1所述的利用vue繪制svg圖表的方法，其特征在于，所述接收用戶圖表樣式需求，根據所述需求配置圖表基礎組件和圖表容器，包括：

所述用戶圖表樣式需求為常規圖表樣式，選取圖標庫中的圖表基礎組件和圖表容器；

所述用戶圖表樣式需求為自定義圖表樣式，配置所述控制參數構建新的圖表基礎組件和新的圖表容器，并在所述新的圖表基礎組件之間插入自定義元素。

3.根據權利要求1所述的利用vue繪制svg圖表的方法，其特征在于，根據所述交互請求處理所述圖表的過程包括：

分析交互請求的對象及請求信息，所述對象包括圖表基礎組件、圖表容器以及圖表數據；所述請求信息包括修改圖表基礎組件的控制參數、修改圖表容器的控制參數以及更新圖表數據；

根據上述分析獲得的交互請求的對象及請求信息，對所述圖表進行處理。

4.一種利用vue繪制svg圖表的裝置，其特征在于，包括：

框架搭建單元，用于搭建漸進式vue框架；

圖標庫建立單元，用于分別封裝若干圖表基礎組件和若干圖表容器，由此構建圖標庫；

參數定義單元，用于定義所述圖標庫中每個圖表基礎組件和每個圖表容器各自的控制參數；

圖表組件配置單元，用于根據用戶圖表樣式需求，根據圖標庫建立單元和參數定義單元配置圖表基礎組件和圖表容器，并封裝配置后的圖表基礎組件和圖表容器形成圖表組件；

圖表構建單元，用于根據所述圖表組件以及圖表數據構建圖表，并將該圖表展示給用戶；

交互單元，用于根據用戶圖表交互請求處理所述圖表；

該裝置還包括圖表渲染單元，用于對所述圖表構建單元構建的圖表進行動態效果渲染后展示給用戶；所述根據用戶圖表動畫需求，配置圖表動畫效果，包括：

封裝常規圖表動畫效果以及通過FLIP方案新增的圖表動畫效果；

定義上述圖表動畫效果的控制參數；

所述用戶圖表動畫需求為常規的圖表動畫效果，選取上述封裝的圖表動畫效果；所述用戶圖表動畫需求為自定義圖表動畫效果，配置所述圖表動畫效果的控制參數構建新的圖表動畫效果。

5.根據權利要求4所述的利用vue繪制svg圖表的裝置，其特征在于，所述參數定義單元還用于定義所述圖表渲染單元的控制參數。

6.一種計算機設備，包括存儲器、處理器及存儲在存儲器上并可在處理器上運行的計算機程序，其特征在于，所述處理器執行所述計算機程序時實現權利要求1至3中任一項所述方法的步驟。

7.一種計算機可讀存儲介質，其上存儲有計算機程序，其特征在于，所述計算機程序被處理器執行時實現權利要求1至3中任一項所述方法的步驟。