BQ8.2儀表板介紹

1、目錄產(chǎn)品介紹123功能介紹場景介紹4幫助介紹產(chǎn)品概述儀表板(Dashboard)： 是根據(jù)特定的綜合信息需求,可嵌入包括數(shù)據(jù)、交互、布局等部件，可以向用戶形象的展現(xiàn)數(shù)據(jù)分析的結(jié)果，又可以通過動態(tài)交互式的方式幫助用戶分析商業(yè)問題； 作為通用的企業(yè)級儀表板設(shè)計工具，支持自定義數(shù)據(jù)、語義層對象、多維模型對象作為數(shù)據(jù)源；是用友BQ設(shè)計工具的有機(jī)組成部分，它可與建模工具無縫集成，并可方便使用建模工具的建模成果。 用戶及用途精心布局復(fù)雜交互前臺數(shù)據(jù)處理自定義展現(xiàn)BI實(shí)施輕量開發(fā)用戶分析BI實(shí)施精心布局同一個儀表板，設(shè)置布局，多尺寸屏幕完全適應(yīng)，自動縮放。簡單設(shè)置，快速實(shí)現(xiàn)靈活布局。用戶分析BI實(shí)施復(fù)雜交互

2、過濾、鉆取、跳轉(zhuǎn)、切換、排序等交互能力完全必備；交互設(shè)置生成腳本輕松實(shí)現(xiàn)部件聯(lián)接，參數(shù)設(shè)置，刷新部件等交互能力；控件交互：點(diǎn)擊交互，傳遞參數(shù)腳本：自動生成腳本，手動編寫腳本，實(shí)現(xiàn)更高級交互用戶分析輕量開發(fā)前端數(shù)據(jù)處理 計算完成率，占比等指標(biāo)-通過JS腳本快速實(shí)現(xiàn)； 過濾原始數(shù)據(jù)，加載一份數(shù)據(jù)用于多種展示-通過數(shù)據(jù)集API進(jìn)行前端數(shù)據(jù)處理;用戶分析輕量開發(fā)自定義展現(xiàn) 集成第三方頁面-Web瀏覽器 使用開源控件-第三方控件、H5控件 使用門戶組織展現(xiàn)，權(quán)限實(shí)現(xiàn)展示內(nèi)容-自定義門戶目錄產(chǎn)品介紹123功能介紹場景介紹4幫助介紹功能介紹儀表板設(shè)計器屬性設(shè)置面板，為每個部件設(shè)置相關(guān)屬性，實(shí)現(xiàn)部件功能腳本：

3、可在任意部件中撰寫JS腳本，實(shí)現(xiàn)儀表板各種交互能力數(shù)據(jù)源：創(chuàng)建數(shù)據(jù)集，用于控件和腳本重使用畫布：拖拽部件到畫布自由擺放，設(shè)計儀表板部件選擇器：可選擇各類用于展示的部件，直接拖拽部件管理：快速選中部件，修改展示層級及可見性保存為儀表板文件后，新建儀表板，可以打開已保存的儀表板文件實(shí)現(xiàn)儀表板之間的文件復(fù)制功能介紹布局所有的屬性都是針對部件的父對象進(jìn)行設(shè)置：X值、Y值：以父容器左上開始向右下的像素值；寬度、高度：本容器的高寬像素值；錨點(diǎn)：外部的四個方向：指與父容器四邊的關(guān)系（沒有關(guān)系、固定像素、比例像素）；內(nèi)部的兩個方向：指是否能夠被縮放；提示：如果相對兩個方向設(shè)置了與邊界的關(guān)系，這個部件將按照規(guī)則

4、被放大或縮?。粌?nèi)部的錨點(diǎn)是指該部件的高寬是否能夠被縮放；支持靈活布局，包括容器、頁簽等布局部件，部件大小支持隨布局部件保持固定值、按絕對值、按比例大小等多種變化方式，可適應(yīng)多種布局場景需求。儀表板任何控件可以通過布局設(shè)置后，可以在不同分辨率不同尺寸的屏幕上進(jìn)行縮放。布局最靈活！功能介紹布局練習(xí)練習(xí)1：上下布局練習(xí)2：居中布局（大小改變/大小不變）功能介紹控件常規(guī)部件：主要有選擇器部件，文本部件，表格部件，菜單部件等容器類：用容器組織部件，方便統(tǒng)一展示和管理；web容器用于展示web內(nèi)容引用部件：快速引用BQ82其他產(chǎn)品內(nèi)容，且能通過參數(shù)實(shí)現(xiàn)引用內(nèi)容之間的傳參統(tǒng)計圖部件：涵蓋了應(yīng)用較廣的常規(guī)統(tǒng)計

5、圖，包括直角系、圓周系、單指標(biāo)展示等。其中單指標(biāo)類部件（如儀表盤）可通過參數(shù)賦值，其他部件可直接使用語義模型。功能介紹控件選擇器部件 下拉列表 樹形下拉列表 列表框 樹形列表框 數(shù)據(jù)陣列設(shè)置默認(rèn)選項：setSelectedIndex(index); setSelectedValue(value);獲取選擇數(shù)據(jù)：getSelectedDataRows();功能介紹控件數(shù)據(jù)表格過濾：支持在設(shè)計器中定義過濾，及在運(yùn)行態(tài)通過腳本實(shí)現(xiàn)數(shù)據(jù)過濾，可以通過數(shù)據(jù)表格為語義模型提供參數(shù)完成對模型層參數(shù)的傳遞；排序：支持在設(shè)計器中定義排序邏輯，也可以在運(yùn)行態(tài)由客戶完成排序操作；分組：支持在多級字段分組，分組統(tǒng)計；

6、條件格式：支持在數(shù)據(jù)表格中根據(jù)數(shù)據(jù)控制頁面上的顯示格式，如修改文字顏色、單元格背景色，嵌入作為警示的圖片；數(shù)據(jù)集：作為比較復(fù)雜運(yùn)算的數(shù)據(jù)來源，在儀表板中可以使用JS進(jìn)行數(shù)據(jù)運(yùn)算和交互控制；數(shù)據(jù)表格既可以作為展現(xiàn)數(shù)據(jù)的部件使用，也可以作為儀表板中數(shù)據(jù)加工的數(shù)據(jù)來源使用。功能介紹控件統(tǒng)計圖部件1、BQ8的統(tǒng)計圖從控件層面，報表、多維、儀表板三個產(chǎn)品使用的是相同的控件，從而保證了基本一致的展示效果和交互能力；2、不同的是報表中的統(tǒng)計圖不能夠使用多維作為數(shù)據(jù)源，透視表中的統(tǒng)計圖不能夠使用語義模型作為數(shù)據(jù)源，儀表板中的統(tǒng)計圖沒有限制；3、報表和透視表中的統(tǒng)計圖交互必須通過設(shè)置完成，僅能夠?qū)崿F(xiàn)產(chǎn)品中提供的

7、能力；儀表板中的統(tǒng)計圖還可以通過API控制完成更加靈活的交互和數(shù)據(jù)處理能力；功能介紹控件引用部件儀表板中可以方便引用BQ平臺已有的報表，如自由報表、透視表、儀表板。1.通過引用部件屬性面板-引用設(shè)置，選擇系統(tǒng)中已經(jīng)設(shè)計好的報表；1.匹配參數(shù)：目標(biāo)報表與儀表板的參數(shù)匹配；功能介紹控件練習(xí)練習(xí)1：5種選擇器控件，使用2種設(shè)置默認(rèn)值方式，獲取選中值（單選和多選）練習(xí)2：使用數(shù)據(jù)表格，設(shè)置表格樣式、條件格式（三種方式）練習(xí)3：使用統(tǒng)計圖，啟用排序、鉆取、切換維度指標(biāo)功能練習(xí)4：引用一張已經(jīng)做好的自由報表功能介紹交互 豐富的部件交互方式，支持參數(shù)、腳本編程，可實(shí)現(xiàn)數(shù)據(jù)刷新，過濾、排序、聯(lián)動、預(yù)警等。 為

8、了方便用戶快速使用腳本，并提供了交互設(shè)置功能，通過簡單設(shè)置一鍵生成腳本即可實(shí)現(xiàn)儀表板基本交互能力。 靈活鏈接功能，通過web容器、鏈接功能方便快速實(shí)現(xiàn)儀表板與第三方內(nèi)容的鏈接跳轉(zhuǎn)及參數(shù)傳遞功能。打開窗口鉆取功能介紹交互實(shí)現(xiàn)過程消息參數(shù)事件準(zhǔn)備參數(shù)通過參數(shù)過濾觸發(fā)事件為參數(shù)賦值刷新部件消息腳本腳本腳本功能介紹交互腳本 儀表板中提供JS腳本能力，通過腳本進(jìn)行界面和數(shù)據(jù)控制，腳本的寫法通常是部件名稱.方法屬性； 選擇在畫布和部件管理中選擇到相應(yīng)的部件，點(diǎn)擊【腳本】頁簽查看腳本； 符合JS腳本語法規(guī)則； 引用JS或CSS方法：importJS(url,charset);importCSS(url);u

9、rl可以用相對路徑，但文件必須放在homehotwebsportal路徑下。 調(diào)出腳本提示：ALT+”.”； 腳本的執(zhí)行順序：儀表板init方法按深度優(yōu)先各部件的init其他方法按需實(shí)行。注意：init只會在部件加載時執(zhí)行一次。關(guān)于整個儀表板輕量運(yùn)行加載順序可在體驗(yàn)環(huán)境中下載文檔。功能介紹交互腳本練習(xí)練習(xí)1：給剛剛創(chuàng)建的選擇器控件通過腳本設(shè)置默認(rèn)值（兩種方式），通過腳本獲取顯示值；功能介紹交互參數(shù)私有參數(shù)：主要用于儀表板內(nèi)部傳遞使用；公共參數(shù)：用于外部通過訪問儀表板時傳遞參數(shù)；巧用表達(dá)式直接訪問數(shù)據(jù)庫獲取單值：SmartX(sql,datasource)；使用參數(shù)：1、在部件屬性中直接通過選擇

10、使用參數(shù)，如過濾，儀表盤賦值；2、通過腳本使用參數(shù)：設(shè)置參數(shù)值：param.setValue(“參數(shù)名”,”值”);獲取參數(shù)值：param.getValue(“參數(shù)名”)Tips：在儀表板輕量運(yùn)行時，同時按下ALT+F1調(diào)出狀態(tài)面板，實(shí)時觀察在儀表板交互時參數(shù)的變化，便于調(diào)試儀表板。功能介紹交互參數(shù)練習(xí)練習(xí)1：給剛剛創(chuàng)建的引用部件匹配儀表板參數(shù)，并給參數(shù)賦值；練習(xí)2：使用SmartX獲取數(shù)據(jù)庫表的值；練習(xí)3：創(chuàng)建一個儀表盤，給其賦值；功能介紹交互事件交互必然觸發(fā)事件，儀表板中所有部件均有事件，如柱形圖點(diǎn)擊系列，條形圖點(diǎn)擊分類軸，數(shù)據(jù)部件數(shù)據(jù)加載完成等。在事件中可編寫腳本實(shí)現(xiàn)交互設(shè)置。Tips：

11、LoadFinished作為數(shù)據(jù)部件加載數(shù)據(jù)完成后一定會觸發(fā)的事件，判斷是否加載數(shù)據(jù)可通過此事件；Init作為部件初始加載時觸發(fā)的事件。可在此事件中為這個部件設(shè)置默認(rèn)值；onMessage作為消息事件，儀表板中的消息均可以通過此事件接收；功能介紹交互事件練習(xí)練習(xí)1：通過init事件給lable設(shè)置初始值；練習(xí)2：巧用數(shù)據(jù)集的LoadDataFinished事件，在數(shù)據(jù)加載完成后將結(jié)果賦值給lable（使用數(shù)據(jù)集的API）；練習(xí)3：運(yùn)用統(tǒng)計圖點(diǎn)擊系列和分類軸事件，并獲取當(dāng)前點(diǎn)擊的內(nèi)容；功能介紹交互消息儀表板部件中發(fā)出的消息可以在所有部件的onMessage方法中獲取；參數(shù)：代表

12、發(fā)出消息的部件名稱，message代表消息內(nèi)容；第三方控件或web網(wǎng)頁的消息通過bqMessage()方法發(fā)送給儀表板；部件消息消息消息消息messagemessagemessagemessage功能介紹交互消息練習(xí)練習(xí)1：創(chuàng)建統(tǒng)計圖部件，發(fā)送當(dāng)前選中分類軸信息，在lable部件中接收此消息，并將其顯示出來；功能介紹交互交互設(shè)置通過交互設(shè)置功能，使得儀表板自動生成交互腳本實(shí)現(xiàn)常規(guī)交互功能。交互設(shè)置面板一覽儀表板當(dāng)前交互列表。交互設(shè)置可實(shí)現(xiàn)： 部件聯(lián)動 設(shè)置參數(shù) 部件刷新功能介紹交互鏈接跳轉(zhuǎn)鏈接功能：儀表板中大部分部件都提供鏈接功能，只要通過鏈接功能設(shè)置便可輕松實(shí)現(xiàn)鏈接跳轉(zhuǎn)；Web容器：通過we

13、b容器+JS腳本也可實(shí)現(xiàn)自定義鏈接功能，能夠自定義鏈接彈出窗口樣式；在觸發(fā)鏈接的位置編寫腳本：WEBBROWSER_name.url = 目標(biāo)頁面的url地址，BQ產(chǎn)品則為openBQ的地址。功能介紹交互練習(xí)練習(xí)1：通過交互設(shè)置完成現(xiàn)金流分析練習(xí)2：通過鏈接功能打開自由報表（有參數(shù)）練習(xí)3：通過openBQ鏈接打開自由報表（有參數(shù)）功能介紹數(shù)據(jù) 儀表板原生部件均可直接通過語義模型提供數(shù)據(jù)，部分部件還可以通過自定義模型提供數(shù)據(jù)； BQ8.2提供新的數(shù)據(jù)功能：數(shù)據(jù)集。通過統(tǒng)一設(shè)置數(shù)據(jù)集，便可以重復(fù)使用該數(shù)據(jù)集的數(shù)據(jù)，并還可以對該數(shù)據(jù)集進(jìn)行進(jìn)一步加工。第三方控件直接使用數(shù)據(jù)集功能介紹數(shù)據(jù)練習(xí)練習(xí)1：

14、創(chuàng)建一個數(shù)據(jù)集，通過腳本引用數(shù)據(jù)集的API（getAllData(),getRows(),getTotal()等）功能介紹自定義擴(kuò)展強(qiáng)大的自定義擴(kuò)展能力web頁面第三方控件H5控件自定義門戶功能介紹自定義擴(kuò)展web頁面Web頁面可以引用任意輕量開源的網(wǎng)頁；Web頁面與儀表板之間的交互可以通過bqmessage方法實(shí)現(xiàn)。功能介紹自定義擴(kuò)展第三方控件 數(shù)據(jù)展現(xiàn)類：樹圖、標(biāo)簽云、力導(dǎo)向樹圖、力導(dǎo)向關(guān)系圖、溫度計式條形圖、玫瑰餅圖等 數(shù)據(jù)分析類：趨勢線、正態(tài)分布 地圖分析類：3D全球地圖、中國省市縣鉆取地圖、平鋪世界地圖、全景地圖等功能介紹自定義擴(kuò)展第三方控件-必須文件-json文件：儀表板屬性面板配

15、置Html文件：主要顯示頁面-非必須文件-圖片文件：儀表板部件選擇器示意圖其他文件：實(shí)現(xiàn)第三方控件功能的一些資源文件，如css、js，資源文件夾等導(dǎo)入BQ平臺儀表板引用部件選擇器選擇已導(dǎo)入的第三方控件，拖拽到畫布，設(shè)置數(shù)據(jù)及屬性，輕量預(yù)覽使用。在BQ平臺中啟用“導(dǎo)入第三方插件”節(jié)點(diǎn)；打開輔助工具-BQ第三方插件節(jié)點(diǎn)，導(dǎo)入即可；功能介紹自定義擴(kuò)展第三方控件1、找到開源圖表并下載。查找各種開源控件網(wǎng)站，如echarts、highchart、ucharts等；2、制作控件。要使第三方控件能夠通過儀表板提供數(shù)據(jù)及各種屬性，則需要運(yùn)用儀表板提供的bqconfig屬性面板及加載數(shù)據(jù)和屬性的API方法； b

16、qconfig.json文件為儀表板認(rèn)識的屬性面板設(shè)置。導(dǎo)入到BQ8.2后，儀表板會通過此文件進(jìn)行編譯生成屬性面板；參考后面章節(jié)bqconfig文件配置說明。 儀表板按照bqconfig生成的屬性面板給值之后傳遞給第三方控件的API方法；參考后面章節(jié)API方法。3、壓縮成zip包。注意：不能用文件夾壓縮；第三方控件制作及使用介紹：4、打開BQ8.2節(jié)點(diǎn)“導(dǎo)入第三方插件”，將第三方zip包導(dǎo)入；5、設(shè)計儀表板，在部件選擇器中選擇第三方控件；6、創(chuàng)建數(shù)據(jù)集，在第三方控件的屬性面板中綁定數(shù)據(jù)集，并匹配數(shù)據(jù)列；7、設(shè)置屬性，屬性可以是文本值，也可以是通過儀表板參數(shù)提供，如在文本輸入地方編寫param(

17、paramname)即可將參數(shù)值傳給屬性；8、獲取控件事件消息。在儀表板的任意部件中的onMessage方法中的message即為控件發(fā)出的消息，使用時需指定from為第三方控件名；9、輕量預(yù)覽儀表板。功能介紹自定義擴(kuò)展第三方控件 “compObjectName”: “bqmap”, -第三方部件對象名稱 “htmlName”: “bmap.html”, -主頁名字 “iconNormal”:“iconNormal.png”, -調(diào)色板圖標(biāo)文件 “iconSmall”:“iconSmall.png”, -部件樹圖標(biāo)文件 “Properties”: -屬性編輯器開始 groupName1: -屬

18、性編輯器分組，若屬性很多，或者根據(jù)屬性用途?？梢钥紤]分若干個組 pName1: -屬性Code ，屬性間唯一標(biāo)識 showName: 屬性名稱1“,-屬性名稱，在儀表板編輯器上顯示的內(nèi)容，可以與code不同 editorType : “text”,-編輯器類型，可以是text、combobox、dataset、table、boolean。未知類型都按text類型處理 “range”: “v1”,“v2”,-編輯器取值范圍，對于text ，boolean，boolean 此信息無意義，可以不寫range 字段，對于dataset，此信息是字段名信息，必須寫 “defaultValue”: “v1

19、”-編輯器默認(rèn)值。 對于dataset，這個信息也無意義，也可以不寫 , pName4: showName: Dataset, editorType: dataset, “range”: “columA”, “columB”, “columC”, “columD ”-字段名 主要配置文件bqconfig.json：描述了部件的對象信息，html信息，圖標(biāo)、屬性編輯器信息等。此文件不能改名，是讀取配置信息的入口。格式和說明如下： 功能介紹自定義擴(kuò)展第三方控件function thirdclass() -第三方控件類名this.setDataset = function (name , dataS

20、tr)-儀表板提供加載數(shù)據(jù)的方法，其中key值為bqconfig.json文件中的屬性類型為dataset的屬性名，value為屬性值?？稍诖朔椒ㄖ袑懲ㄟ^儀表板傳遞的屬性值來修改第三方控件屬性值的腳本。this.setProperty = function (key, value) -儀表板提供加載屬性的方法，其中key值為bqconfig.json文件中的屬性類型除了dataset之外的屬性名，value為屬性值?？稍诖朔椒ㄖ袑懲ㄟ^儀表板傳遞的數(shù)據(jù)來修改第三方控件的數(shù)據(jù)的腳本。this.refresh = function () -儀表板提供刷新方法?？稍诖朔椒ㄖ袑懰⑿碌谌娇丶哪_本。va

21、r third= new thirdclass (); -定義對象變量，此類變量名必須市bqconfig.json文件中compObjectName的值。thirdclass.refresh(); -指定默認(rèn)刷新第三方控件。此腳本不是必須，主要用于第三方控件包的調(diào)試。bqMessage(message); -將控件的事件以消息形式傳遞給儀表板，message內(nèi)容根據(jù)實(shí)際需求指定，此段腳本需寫在控件的監(jiān)聽事件內(nèi)。儀表板提供的API方法，第三方控件制作時必須要有的腳本。功能介紹第三方控件練習(xí)練習(xí)1：在BQ體驗(yàn)站點(diǎn)中任意下載一個第三方控件包，在儀表板中正確使用；練習(xí)2：（高級練習(xí)）制作一個echarts第三方包（儀表盤），要求可以為儀表盤設(shè)置數(shù)據(jù)，設(shè)置顏色；功能介紹自定義擴(kuò)展H5控件H5控件是指在儀表板輕量運(yùn)行時獲得更快速的加載，且能夠覆蓋常規(guī)控件常用功能及高級功能的控件?；贐Q8.2+匯總補(bǔ)丁，當(dāng)前已經(jīng)封裝好的H5控件有：環(huán)形指標(biāo)陣列、字符云、數(shù)據(jù)表格、數(shù)據(jù)陣列、下拉菜單、窗口、鉆取統(tǒng)計圖、下拉樹、樹形表格；在體驗(yàn)網(wǎng)址中下載封裝控件示例即可快速實(shí)現(xiàn)展示。功能介紹H5控件練習(xí)練習(xí)1：在BQ體驗(yàn)站點(diǎn)中下載H5控件-數(shù)據(jù)表格，設(shè)置樣式，啟用編輯，獲取編輯后的數(shù)據(jù)，導(dǎo)出數(shù)據(jù)練習(xí)2：在BQ體驗(yàn)站點(diǎn)中下載H5控件-鉆取統(tǒng)計圖（分類