一種簡化echarts調(diào)用的封裝方法
【技術(shù)領(lǐng)域】
[0001] 本發(fā)明設(shè)及前端開發(fā)技術(shù)領(lǐng)域,尤其是一種簡化echarts調(diào)用的封裝方法。
【背景技術(shù)】
[0002] 近幾年隨著前端技術(shù)的發(fā)展和人們對大數(shù)據(jù)的重視,各種大數(shù)據(jù)圖表展示工具越 來越多地出現(xiàn)在開發(fā)者的視野中,百度也提供了一款優(yōu)秀的開源的echarts。echarts憑 借著強大豐富的圖表展示和高度自定義的配置參數(shù),越來越多出現(xiàn)在各種數(shù)據(jù)展示的項目 中。echarts也采用了時下流行的AMD的開發(fā)標準,echarts的范例中提供了說明,但是AMD 加載方式對于很多開發(fā)人員來說都是很陌生的,需要使用額外的時間去了解AMD。每次調(diào)用 都需要正確配置echarts的位置和require加載必要的模塊,顯然重復著復雜的加載信息 不是高效的開發(fā)方式;而且萬一echarts的存放位置變更了,開發(fā)人員不得不查找所有的 調(diào)用去修正echarts的路徑。同時echarts高度自定義的配置參數(shù)意味著需要傳入大量的 且復雜不好記憶的參數(shù);其中有相當一部分的參數(shù)是相對固定的且修改的概率非常小的。 結(jié)果是開發(fā)者在每次調(diào)用echarts生成圖表的時候,都需要帶上好些固定且一樣的樣式參 數(shù),顯然運種調(diào)用方式是效率的浪費。一旦系統(tǒng)的圖形報表樣式需要變更,開發(fā)者不得不查 找每次的調(diào)用,將每次調(diào)用的樣式修改,顯然項目開發(fā)中不能將寶貴的時間和人力投入到 運種低效的修改中。
【發(fā)明內(nèi)容】
[0003] 本發(fā)明解決的技術(shù)問題在于提供一種簡化echarts調(diào)用的封裝方法;有效提供調(diào) 用echarts生成圖表的效率。
[0004] 本發(fā)明解決上述技術(shù)問題的技術(shù)方案是: 陽〇化]通過參數(shù)分類、簡化映射、定義默認值、模塊封裝處理方式構(gòu)造一個帶html元素ID值和對應(yīng)echarts配置參數(shù)的批量json數(shù)據(jù);其中echarts配置參數(shù)為簡化后或原生 態(tài)的配置參數(shù),調(diào)用封裝程序中的接口解析json數(shù)據(jù),使用echarts批量生成圖表;
[0006] 所述的批量json數(shù)據(jù)類似W下形式:
[0007]varconfig= {''chart1:chartl_config};
[0008] 其中key值即chartl為需要展示圖表的html元素的ID值,chartLconfig是 chart 1對應(yīng)的echarts配置參數(shù),同樣使用了json格式,配置參數(shù)為經(jīng)過封裝后的json數(shù) 據(jù)和/或原生的json數(shù)據(jù),調(diào)用函數(shù)判斷當前配置參數(shù)的類型,決定是否調(diào)用解析邏輯將 封裝后的json配置參數(shù)解析成echarts原生的json配置參數(shù);
[0009] 所述的封裝程序?qū)?shù)解析、定義默認參數(shù)和echarts引入調(diào)用等邏輯封裝在一 個js文件中,免去echarts引入和加載模塊等細節(jié)問題;僅需使用使用封裝程序定義的少 量簡單的配置配置參數(shù)即可生成echarts圖形報表。
[0010] 所述方法的具體流程為:
[0011] 第一步,引入echarts. js主文件和封裝模塊createEcharts. js兩個文件;
[0012] 第二步,修改封裝js模塊文件頂部的echarts路徑并引入;
[OOU] 第;步,通過調(diào)用邸charts,load({domID:config})的接口傳入數(shù)據(jù),load遍歷 數(shù)據(jù),判斷config是封裝模塊定義的配置參數(shù)還是echarts原生的配置參數(shù),對不同的參 數(shù)執(zhí)行不同的處理:
[0014] 對echarts原生的配置參數(shù)調(diào)用模塊內(nèi)orginal化eate的方法簡單地使用 echarts直接生成圖形,對模塊定義的配置參數(shù)則通過解析生成echarts原生的參數(shù)配置 后再調(diào)用echarts生成圖形;
[0015] 第四步,模塊定義的配置參數(shù)解析成原生的echarts配置參數(shù);
[0016] 第五步,使用解析過的參數(shù)使用echarts生成圖表的原生接口生成圖表。
[0017] 所述的步驟四中,將echarts原生的參數(shù)整理成四類并采用不同的處理方式:
[0018] A、數(shù)據(jù)展示參數(shù):數(shù)據(jù)展示參數(shù)是必須參數(shù),是最重要的參數(shù),通過映射的方式使 用更簡單的方式傳入;其中,title和subtitle需要原生的參數(shù)通過W下方式傳入:
[0019] title : {text :'主標題',subtext :'副標題'},封裝的方式是將主標題和副標 題拆分成兩個參數(shù)分別使用title :'主標題',subTitle :'副標題'運樣的形式傳入,而 封裝程序做逆向操作,將拆分的參數(shù)組裝成原生的參數(shù),其他必須的參數(shù)也是采用此解析 方式;
[0020] B、固定樣式參數(shù):展示數(shù)據(jù)的輔助參數(shù),如:標題的位置居中左對齊,圖例的是否 顯示和顯示位置等;運類參數(shù)通常在同一系統(tǒng)中通常都是固定的,所W無需每次調(diào)用都傳 入;使用簡化映射的方式,將此類參數(shù)定義在封裝程序中;封裝程序首先檢測是否外部傳 入?yún)?shù),傳入則使用外部參數(shù)覆蓋默認參數(shù),沒傳入繼續(xù)使用默認參數(shù),將合并之后的樣式 參數(shù)解析成原生的echarts參數(shù);
[0021] C、功能模塊參數(shù):echarts提供一些功能性的模塊,有數(shù)據(jù)視圖、放大、保存圖片 等,運些模塊需要傳入類似:
[0022]
[0023]
[0024] 運些功能模塊在同一系統(tǒng)中的變更的概率很小,封裝程序?qū)⑦\些模塊封裝在內(nèi)部 并定義一些默認的參數(shù);外部傳入數(shù)組的形式,如果只是開啟模塊,只需傳入一個相對應(yīng)的 字符key值,封裝邏輯根據(jù)傳入的key值加載默認的參數(shù);如果需要使用非默認配置來開 啟模塊,則需傳入完整的原生模塊參數(shù),封裝模塊將運兩部分的參數(shù)解析合并成原生的參 數(shù);
[00巧]D、不常用的參數(shù):一些在特殊情況下才需要使用的參數(shù),運些參數(shù)或只需使用echarts原生的默認值,或是內(nèi)部使用固定的值去定義,需要改變的時候才在外部傳入;不 常用的參數(shù)往往是比較深入的參數(shù),采用不一樣的映射解析方式;采用"層次1_層次2 : {原生參數(shù)}"運種形式去定義,封裝程序判斷是否傳入了不常用參數(shù),如果傳入了根據(jù)不 常用參數(shù)的key值解析出正確原生層次關(guān)系,并根據(jù)覆蓋參數(shù),將參數(shù)合并到已經(jīng)完成解 析的原生的echarts參數(shù)當中。
[00%] 本發(fā)明的核屯、在于簡化echarts的參數(shù):通過參數(shù)分類、簡化映射、定義默認值、 模塊封裝等處理方法構(gòu)造一個帶html元素ID值和對應(yīng)echarts配置參數(shù)的批量json數(shù) 據(jù),調(diào)用封裝程序的echarts生成接口,能夠完全屏蔽echarts加載模塊調(diào)用的細節(jié),快捷 簡單地使用批量json數(shù)據(jù)批量生成echarts圖表。本發(fā)明將echarts的路徑配置和AMD 模塊加載封裝在模塊文件當中,開發(fā)者無需每次調(diào)用echarts生成圖表的時候再次調(diào)用, 只需簡單地引入封裝模塊文件,使用封裝模塊提供的接口和參數(shù)去批量生成echarts圖表 即可。
[0027] 上述批量json數(shù)據(jù)中的echarts配置參數(shù)同樣為json數(shù)據(jù),支持原生的echarts 配置參數(shù)和經(jīng)過封裝簡化后的echarts配置參數(shù),封裝程序可判斷當前參數(shù)的類型,對不 同的參數(shù)調(diào)用不同的內(nèi)部方法。
[0028] 本發(fā)明簡化echarts單次傳入的參數(shù)的數(shù)量和復雜程度,提高項目的開發(fā)效率; 非常適合在樣式相對固定和頻繁調(diào)用echarts的項目。本申請,就結(jié)果而言對比官方的例 子,代碼量縮減了 62%的代碼量。本發(fā)明參數(shù)支持原生的和經(jīng)過封裝的參數(shù),而且經(jīng)過封裝 后的參數(shù)也允許使用單層的模式去查找替換原生的數(shù)據(jù)。本發(fā)明提供了全局樣式的修改方 式,功能模塊的參數(shù)支持字符串和json配置,如果是簡單的字符串采用默認值開啟該功能 模塊,如果傳入是json配置,則需要采用原生的echarts功能參數(shù)去修改。
【附圖說明】
[0029] 下面結(jié)合附圖對本發(fā)明進一步說明:
[0030] 圖1是本發(fā)明詳細流程。
【具體實施方式】
[0031] 本發(fā)明通過參數(shù)分類、簡化映射、定義默認值、模塊封裝處理方式構(gòu)造一個帶html 元素ID值和對應(yīng)echarts配置參數(shù)的批量json數(shù)據(jù);其中echarts配置參數(shù)為簡化后或 原生態(tài)的配置參數(shù),調(diào)用封裝程序中的接口解析json數(shù)據(jù),使用echarts批量生成圖表;
[0032] 所述的批量json數(shù)據(jù)類似W下形式:
[0033] var config= {chart1 :chartl_config};
[0034] 其中key值即chartl為需要展示圖表的html元素的ID值,chartLconfig是 chartl對應(yīng)的echarts配置參數(shù),同樣使用了json格式,配置參數(shù)為經(jīng)過封裝后的json數(shù) 據(jù)和/或原生的json數(shù)據(jù),調(diào)用函數(shù)判斷當前配置參數(shù)的類型,決定是否調(diào)用解析邏輯將 封裝后的json配置參數(shù)解析成echarts原生的json配置參數(shù);
[0035] 所述的封裝程序?qū)?shù)解析、定義默認參數(shù)和echarts引入調(diào)用等邏輯封裝在一 個js文件中,免去echarts引入和加載模塊等細節(jié)問題;僅需使用使用封裝程序定義的少 量簡單的配置配置參數(shù)即可生成echarts圖形報表。
[0036] 所述方法的具體流程為:
[0037] 第一步,引入echarts. js主文件和封裝模塊createEcharts. js兩個文件; 陽03引第二步,修改封裝js模塊文件頂部的echarts路徑并引入;
[0039] 第S步,通過調(diào)用邸charts.load({domID:config})的接口傳入數(shù)據(jù),load遍歷 數(shù)據(jù),判斷config是封裝模塊定義的配置參數(shù)還是echarts原生的配置參數(shù),對不同的參 數(shù)執(zhí)行不同的處理: