本發(fā)明屬于可視化系統(tǒng)，具體為一種用于批量生成并下載圖表的解決方案。

背景技術(shù)：

1、可視化系統(tǒng)是目前常見的應(yīng)用系統(tǒng)，該系統(tǒng)直觀清晰的利用圖表將數(shù)據(jù)呈現(xiàn)在屏幕上，對于圖表渲染并批量導(dǎo)出是現(xiàn)在開發(fā)中常見的業(yè)務(wù)場景：場景1：在做數(shù)據(jù)統(tǒng)計(jì)時，需要渲染大量的圖表，其中不免有大量相同的圖表配置，開發(fā)需重復(fù)將冗余的代碼寫到項(xiàng)目中，隨著項(xiàng)目需求的不斷迭代和更新優(yōu)化，冗余代碼不可維護(hù)，此時需要提前將相同的基礎(chǔ)圖表配置提取并加以封裝；場景2：可視化系統(tǒng)中經(jīng)常會有批量圖表導(dǎo)出的需求，此時需要對每個圖表重復(fù)開發(fā)相同的導(dǎo)出相關(guān)代碼，之后每添加一張圖表都需重復(fù)相關(guān)操作，長此以往，也會產(chǎn)生大量的冗余代碼，此時需要將圖表導(dǎo)出以組件形式提取標(biāo)記再批量導(dǎo)出。

2、現(xiàn)有的echarts圖表提供的大量豐富的圖表庫以及集成好的下載圖表的方法，雖然提供了圖表的下載方式，但是在實(shí)際的使用過程中，仍然存在不足之處，echarts只提供了基礎(chǔ)的圖表渲染，但是卻無法快速的生成需求中的定制化圖表，同時圖表下載也是將單張圖表進(jìn)行下載并且無法壓縮，在需要批量處理圖表時，需要耗費(fèi)大量的時間，產(chǎn)生大量冗余代碼，因此需要對此進(jìn)行改進(jìn)。

技術(shù)實(shí)現(xiàn)思路

1、本發(fā)明的目的在于提供一種用于批量生成并下載圖表的解決方案，以解決上述背景技術(shù)中提出的問題。

2、為了實(shí)現(xiàn)上述目的，本發(fā)明提供如下技術(shù)方案：一種用于批量生成并下載圖表的解決方案，具體步驟如下：

3、步驟一：

4、以echarts為基礎(chǔ)庫，搭建基礎(chǔ)平臺，將其提供的基礎(chǔ)配置的圖表進(jìn)行封裝，并實(shí)現(xiàn)渲染；

5、步驟二：

6、收集日常定制化圖表的需求，如顏色，坐標(biāo)軸和標(biāo)簽等，以表單形式編輯，并實(shí)時渲染定制化后的圖表，同時將所選值存儲至定制化對象中；

7、步驟三：

8、將配置化對象和基礎(chǔ)配置對象stringify后分別存入blob對象中，并通過fi?le-saver下載以供開發(fā)者使用；

9、步驟四：

10、將下載的文件存至項(xiàng)目中，標(biāo)記前圖表用于父組件識別當(dāng)前屬于哪種類型圖表，并導(dǎo)出當(dāng)前圖表配置，當(dāng)前文件夾下構(gòu)建index.js,通過require.context方法創(chuàng)建key為標(biāo)記，value為配置函數(shù)的對象，對象內(nèi)容為當(dāng)前文件夾下的配置文件，用于在setoption識別渲染指定圖表，同時封裝初始化echarts的hooks，包含獲取dom后init視圖并setoption圖表，根據(jù)窗口變化重繪圖表等；

11、步驟五：

12、在定制化圖表業(yè)務(wù)組件中，創(chuàng)建自身與基礎(chǔ)配置圖表相同的標(biāo)記和自身的ref存與vue的option對象中，導(dǎo)入最初定制化的配置，將配置與標(biāo)記相同的基礎(chǔ)配置文件合并，得到定制化圖表渲染，當(dāng)前業(yè)務(wù)組件的文件夾下導(dǎo)出所有組件，在業(yè)務(wù)根組件中通過reactive對象接收批量注冊，同時得到的組件數(shù)組用于獲取指定標(biāo)記的ref組件；

13、步驟六：

14、下載文件時，可以根據(jù)選擇的圖表類型標(biāo)記對應(yīng)每個不同業(yè)務(wù)組件的標(biāo)記來進(jìn)行單圖的導(dǎo)出或者全部導(dǎo)出，導(dǎo)出時使用echarts實(shí)例提供的getdataurl方法將canvas轉(zhuǎn)為base64，通過jszip將下載的數(shù)組圖表推入zip實(shí)例中，調(diào)用generateasync方法，在此方法then回調(diào)中對圖表進(jìn)行壓縮下載。

15、作為本發(fā)明的一種優(yōu)選技術(shù)方案，步驟一、步驟四和步驟六中所述的echarts是一款基于javascript的數(shù)據(jù)可視化圖表庫。

16、作為本發(fā)明的一種優(yōu)選技術(shù)方案，步驟三中所述的fi?le-saver是一個用于生成文件的javascript庫。

17、作為本發(fā)明的一種優(yōu)選技術(shù)方案，步驟六中所述的jszip是一個用于創(chuàng)建、讀取和編輯.zip文件的javascript庫。

18、作為本發(fā)明的一種優(yōu)選技術(shù)方案，步驟一中所述的基礎(chǔ)平臺的搭建，提供了多種基礎(chǔ)圖表，并根據(jù)使用者需求定制化圖表，同時渲染出效果并下載相關(guān)代碼，使開發(fā)者可快速應(yīng)用于項(xiàng)目中使用。

19、作為本發(fā)明的一種優(yōu)選技術(shù)方案，步驟四和步驟五中所述的組件自身的定義和通過下載得到的配置文件之間通過標(biāo)記關(guān)聯(lián)的方式，實(shí)現(xiàn)了有效分離配置文件，并使得配置文件的復(fù)用最大化。

20、作為本發(fā)明的一種優(yōu)選技術(shù)方案，步驟五中所述的通過創(chuàng)建自身與基礎(chǔ)配置圖表相同的標(biāo)記和自身的ref存與vue的option對象中的方式，能夠便于父組件的讀取。

21、作為本發(fā)明的一種優(yōu)選技術(shù)方案，步驟六中所述的下載和導(dǎo)出方式，彌補(bǔ)echarts單圖表下載的不足，在將標(biāo)記好的業(yè)務(wù)組件注冊后，實(shí)現(xiàn)了批量下載。

22、作為本發(fā)明的一種優(yōu)選技術(shù)方案，步驟六中所述的壓縮下載的方式，能減少文件的占用空間，提高下載的速率。

23、本發(fā)明的有益效果如下：

24、本發(fā)明提供了快速生成基本圖表和定制化圖表的平臺并提供生成定制化配置代碼，開發(fā)者將默認(rèn)配置與定制化配置在項(xiàng)目中分離后，對定制化的組件進(jìn)行標(biāo)記，標(biāo)記后的組件和合并了定制化配置的基本配置進(jìn)行關(guān)聯(lián)并拋出文件標(biāo)記變量和配置函數(shù)，批量注冊子組件，得到的組件數(shù)組便于識別組件并通過文件標(biāo)記關(guān)聯(lián)批量下載壓縮圖表，具有可根據(jù)需求定制想要的圖表，極大減少開發(fā)時間；定制化圖表關(guān)聯(lián)基礎(chǔ)配置圖表，減少了項(xiàng)目代碼的冗余，便于維護(hù)和批量下載圖表彌補(bǔ)echarts只能單獨(dú)下載缺陷等優(yōu)點(diǎn)。

技術(shù)特征：

1.一種用于批量生成并下載圖表的解決方案，其特征在于，具體步驟如下：

2.根據(jù)權(quán)利要求1所述的一種用于批量生成并下載圖表的解決方案，其特征在于：步驟一、步驟四和步驟六中所述的echarts是一款基于javascript的數(shù)據(jù)可視化圖表庫。

3.根據(jù)權(quán)利要求1所述的一種用于批量生成并下載圖表的解決方案，其特征在于：步驟三中所述的file-saver是一個用于生成文件的javascript庫。

4.根據(jù)權(quán)利要求1所述的一種用于批量生成并下載圖表的解決方案，其特征在于：步驟六中所述的jszip是一個用于創(chuàng)建、讀取和編輯.zip文件的javascript庫。

5.根據(jù)權(quán)利要求1所述的一種用于批量生成并下載圖表的解決方案，其特征在于：步驟一中所述的基礎(chǔ)平臺的搭建，提供了多種基礎(chǔ)圖表，并根據(jù)使用者需求定制化圖表，同時渲染出效果并下載相關(guān)代碼，使開發(fā)者可快速應(yīng)用于項(xiàng)目中使用。

6.根據(jù)權(quán)利要求1所述的一種用于批量生成并下載圖表的解決方案，其特征在于：步驟四和步驟五中所述的組件自身的定義和通過下載得到的配置文件之間通過標(biāo)記關(guān)聯(lián)的方式，實(shí)現(xiàn)了有效分離配置文件，并使得配置文件的復(fù)用最大化。

7.根據(jù)權(quán)利要求1所述的一種用于批量生成并下載圖表的解決方案，其特征在于：步驟五中所述的通過創(chuàng)建自身與基礎(chǔ)配置圖表相同的標(biāo)記和自身的ref存與vue的option對象中的方式，能夠便于父組件的讀取。

8.根據(jù)權(quán)利要求1所述的一種用于批量生成并下載圖表的解決方案，其特征在于：步驟六中所述的下載和導(dǎo)出方式，彌補(bǔ)echarts單圖表下載的不足，在將標(biāo)記好的業(yè)務(wù)組件注冊后，實(shí)現(xiàn)了批量下載。

9.根據(jù)權(quán)利要求1所述的一種用于批量生成并下載圖表的解決方案，其特征在于：步驟六中所述的壓縮下載的方式，能減少文件的占用空間，提高下載的速率。

技術(shù)總結(jié)
本發(fā)明屬于可視化系統(tǒng)技術(shù)領(lǐng)域，且公開了一種用于批量生成并下載圖表的解決方案，具體步驟如下：步驟一：以echarts為基礎(chǔ)庫，搭建基礎(chǔ)平臺，將其提供的基礎(chǔ)配置的圖表進(jìn)行封裝，并實(shí)現(xiàn)渲染；步驟二：收集日常定制化圖表的需求，以表單形式編輯，并實(shí)時渲染定制化后的圖表，同時將所選值存儲至定制化對象中。本發(fā)明提供了快速生成基本圖表和定制化圖表的平臺并提供生成定制化配置代碼，開發(fā)者將默認(rèn)配置與定制化配置在項(xiàng)目中分離后，對定制化的組件進(jìn)行標(biāo)記，標(biāo)記后的組件和合并了定制化配置的基本配置進(jìn)行關(guān)聯(lián)并拋出文件標(biāo)記變量和配置函數(shù)，批量注冊子組件，得到的組件數(shù)組便于識別組件并通過文件標(biāo)記關(guān)聯(lián)批量下載壓縮圖表。

技術(shù)研發(fā)人員：閆玉春
受保護(hù)的技術(shù)使用者：北京皮爾布萊尼軟件有限公司
技術(shù)研發(fā)日：
技術(shù)公布日：2024/12/17