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

有效

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

本發明公開了一種利用vue繪制svg圖表的方法、裝置、計算機設備和存儲介質，方法包括：搭建vue框架；分別封裝圖表基礎組件、圖表容器；定義圖表基礎組件、圖表容器各自的控制參數；根據用戶圖表樣式需求配置圖表基礎組件和圖表容器；封裝所配置的圖表基礎組件和圖表容器，并將圖表數據傳入圖表容器，構建圖表并展示；根據交互請求處理圖表。裝置包括框架搭建單元、圖標庫建立單元、參數定義單元、圖表組件配置單元、圖表構建單元以及交互單元。計算機設備和存儲介質通過執行計算機程序能夠實現上述方法過程。本發明提供封裝、提供定制化機制，以應對不同業務場景，提高了圖表的自由度、可擴展性和復用性，且更符合目前工程技術體系，易于理解和開發。

技術領域

本發明屬于圖表制作技術領域，特別涉及一種利用vue繪制svg圖表的方法、裝置、計算機設備和存儲介質。

背景技術

Vue中展示圖標，一般都是會用三方庫如echarts、g2等來實現，這些三方庫并不能與很好的與Vue結合，主要表現在四點：1、需要拿到一個dom元素，在用三方庫對dom元素做處理，這違背了Vue不直接操作dom的理念。2、不能通過直接修改數據這種Vue的方式來更新圖表，需要手動調用它們提供的api來更新圖表。3、這些三方庫都是配置化渲染一張圖表，配置信息太多，難以理解，并且不能如Vue的模板一樣直觀反映內容的結構。4、這些庫沒有提供一種直觀的方式來讓用戶添加自己內容，擴展報表展示內容，只能使用在他們提供的結構基礎上做修改。

發明內容

本發明的目的在于提供一種具有較高自由度、定制化能力和擴展性的繪制svg圖表的方法、裝置、計算機設備和存儲介質，用戶可以根據自己的需求自定義快速繪制圖表。

實現本發明目的的技術解決方案為：一種利用vue繪制svg圖表的方法，包括以下步驟：

搭建漸進式vue框架；

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

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

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

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

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

進一步地，所述接收用戶圖表樣式需求，根據所述需求配置圖表基礎組件和圖表容器，包括：

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

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

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

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

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

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

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

進一步地，根據所述交互請求處理所述圖表的過程包括：

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