亚洲免费av电影一区二区三区,日韩爱爱视频,51精品视频一区二区三区,91视频爱爱,日韩欧美在线播放视频,中文字幕少妇AV,亚洲电影中文字幕,久久久久亚洲av成人网址,久久综合视频网站,国产在线不卡免费播放

        ?

        一種汽車數(shù)據(jù)自助報(bào)表前端實(shí)現(xiàn)方案

        2021-07-03 04:11:28溫豐蔚張送韋通明溫麗梅韋統(tǒng)邊
        汽車實(shí)用技術(shù) 2021年12期
        關(guān)鍵詞:數(shù)據(jù)源報(bào)表圖表

        溫豐蔚,張送,韋通明,溫麗梅,韋統(tǒng)邊

        (上汽通用五菱汽車股份有限公司技術(shù)中心,廣西 柳州 545007)

        引言

        近年來(lái),隨著汽車數(shù)字化網(wǎng)聯(lián)化的發(fā)展,汽車變得更為智能,也有更多數(shù)據(jù)產(chǎn)生。為了消化這些數(shù)據(jù),讓數(shù)據(jù)服務(wù)于企業(yè),服務(wù)于用戶,制作分析報(bào)表是一個(gè)有效的工具。車企數(shù)據(jù)多存于云端,每次報(bào)表制作前,需要相關(guān)人員從存儲(chǔ)服務(wù)器中導(dǎo)出,導(dǎo)出過(guò)程溝通成本高,重復(fù)性操作較多,浪費(fèi)了很多人力成本。為了更方便快捷地進(jìn)行數(shù)據(jù)報(bào)表的制作,減少溝通成本,提高報(bào)表可復(fù)用性,自主報(bào)表系統(tǒng)應(yīng)運(yùn)而生。

        1 自助報(bào)表系統(tǒng)簡(jiǎn)介

        通過(guò)自助報(bào)表系統(tǒng),制作者可以根據(jù)自己的要求,在web頁(yè)面上選擇對(duì)應(yīng)的數(shù)據(jù)類型,以及數(shù)據(jù)的篩選條件與需要的圖表類型,實(shí)時(shí)自動(dòng)生成對(duì)應(yīng)的報(bào)表。大大節(jié)省了數(shù)據(jù)導(dǎo)出時(shí)間、數(shù)據(jù)統(tǒng)計(jì)時(shí)間,以及溝通成本。

        由于數(shù)據(jù)的實(shí)時(shí)性,可以一次制作周期性報(bào)表如周報(bào)、月報(bào)等,每次打開(kāi)對(duì)應(yīng)頁(yè)面則是最新周期的數(shù)據(jù)報(bào)表,大大減少重復(fù)性工作,把專注力投入到更重要的工作中去。由于圖表可配置,相關(guān)報(bào)表可以快速迭代,可以應(yīng)對(duì)更多場(chǎng)景的要求。

        如圖1所示,系統(tǒng)分為3個(gè)頁(yè)面:報(bào)表頁(yè)面、數(shù)據(jù)源管理頁(yè)和圖表編輯頁(yè)面。

        圖1 平臺(tái)頁(yè)面結(jié)構(gòu)

        (1)數(shù)據(jù)源管理頁(yè):包括工作表創(chuàng)建與字段設(shè)置的功能,工作表中包括了圖表可用的數(shù)值與維度的字段,其操作有數(shù)據(jù)提取,以及一些數(shù)據(jù)預(yù)先聚合等內(nèi)容。

        (2)圖表編輯頁(yè):可編輯多種圖表,其結(jié)構(gòu)主要包括智能顯示、度量篩選器、維度數(shù)值設(shè)置等。其中,圖表類型的智能顯示是指根據(jù)所選的維度和度量個(gè)數(shù)及其類型判斷可以生成的圖表類型并以高亮顯示縮略圖以供用戶選擇。篩選功能主要針對(duì)一些臟數(shù)據(jù)或者用戶不想看到的數(shù)據(jù),為了突出意圖可以進(jìn)行相關(guān)的過(guò)濾從而更加方便地分析所生成的報(bào)表。

        (3)儀表盤頁(yè):主要為報(bào)表管理功能,報(bào)表即為多個(gè)圖表構(gòu)成??梢栽趫?bào)表中對(duì)圖表進(jìn)行操作,包括位置調(diào)整,大小調(diào)整,針對(duì)單個(gè)圖標(biāo)鼠標(biāo)懸停可以進(jìn)行下載、編輯以及刪除動(dòng)作。

        2 方案與架構(gòu)

        2.1 架構(gòu)介紹

        本文中報(bào)表系統(tǒng)前端使用Vue為基礎(chǔ)框架,Vuex為狀態(tài)管理工具,ECharts為圖表庫(kù)。

        Vue.js漸進(jìn)式框架進(jìn)行組件化開(kāi)發(fā)。Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫(kù),也是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的Web界面的庫(kù),擁有非常容易上手的API。

        Vuex為此專門為Vue.js設(shè)計(jì)了狀態(tài)管理庫(kù),利用Vue.js的細(xì)粒度數(shù)據(jù)響應(yīng)機(jī)制來(lái)進(jìn)行高效的狀態(tài)更新,它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。

        ECharts是國(guó)內(nèi)一開(kāi)源的純JavaScript圖表庫(kù),底層依賴輕量級(jí)Canvas類庫(kù)Zrender,對(duì)大數(shù)據(jù)可視化具有較好的支持。

        2.2 報(bào)表頁(yè)面組件

        如圖2所示,Login.vue組件控制用戶登錄登出狀態(tài),登錄成功后會(huì)進(jìn)入到Panel.vue組件,通過(guò)List.vue可以在不同的報(bào)表之間切換,Views.vue為展示報(bào)表展示組件。

        圖2 報(bào)表頁(yè)代碼結(jié)構(gòu)

        2.3 圖表編輯頁(yè)組件

        如圖3所示,Left.vue組件中集成了提供可選字段組件ItemList.vue,和篩選器組件Filter.vue,在Left.vue中實(shí)現(xiàn)控制數(shù)據(jù)的類型與范圍。Middle.vue組件中設(shè)置圖表維度數(shù)值項(xiàng)的組件Axis.vue和圖表預(yù)覽組件Preview.vue。在Right.vue組件中,可以設(shè)置圖表的標(biāo)題Title.vue和類型Type.vue,本文中報(bào)表系統(tǒng)支持包括折線圖在內(nèi)的7種圖表可以選擇。

        圖3 圖表編輯頁(yè)代碼結(jié)構(gòu)

        2.4 數(shù)據(jù)源頁(yè)面

        如圖4所示,數(shù)據(jù)源頁(yè)面由邊欄Sider.vue與面板Panel.vue構(gòu)成。邊欄包括添加、編輯和刪除工作表等動(dòng)作。而面板可以過(guò)濾選擇Filter.vue工作表的字段,并且將其展示出來(lái)(Table.vue)。

        圖4 數(shù)據(jù)源頁(yè)代碼結(jié)構(gòu)

        2.5 圖表編輯模塊設(shè)計(jì)與實(shí)現(xiàn)

        圖表編輯為自助報(bào)表系統(tǒng)前端的核心部分,其主要實(shí)現(xiàn)方式是通過(guò)拖拽單擊等易于理解的交互操作獲取查詢條件[1],將其傳遞給對(duì)應(yīng)的接口,獲取生成圖表的原始數(shù)據(jù),經(jīng)過(guò)對(duì)圖表模型的數(shù)據(jù)轉(zhuǎn)換,將結(jié)果傳遞給ECharts生成最后的圖表。流程如下圖5所示。

        圖5 ECharts配置生成流程

        ECharts生成圖表主要依賴于其Option配置項(xiàng),由于ECharts有很多種格式,其所對(duì)應(yīng)的Option也不盡相同。若對(duì)每一種圖表編寫(xiě)特定的Option代碼,會(huì)造成代碼冗余過(guò)多,維護(hù)困難。為解決這個(gè)問(wèn)題,本文通過(guò)研究ECharts的文擋,采用函數(shù)式編程方式,編寫(xiě)了一套Option拼接模塊[2],其可通過(guò)圖表的查詢參數(shù)和端口返回的數(shù)據(jù)生成對(duì)應(yīng)的Option,交給ECharts生成對(duì)于圖表。

        3 結(jié)語(yǔ)

        文本介紹了一種基于Vue的可視化報(bào)表系統(tǒng)前端設(shè)計(jì)與實(shí)現(xiàn),用于替代傳統(tǒng)的報(bào)表制作方式,減少報(bào)表制作中重復(fù)環(huán)節(jié),提高報(bào)表中各個(gè)圖表的可重用性,使得報(bào)表更易于分享與展示。

        猜你喜歡
        數(shù)據(jù)源報(bào)表圖表
        LabWindows/CVI中Excel報(bào)表技術(shù)研究
        Web 大數(shù)據(jù)系統(tǒng)數(shù)據(jù)源選擇*
        從三大報(bào)表讀懂養(yǎng)豬人的成績(jī)單
        基于不同網(wǎng)絡(luò)數(shù)據(jù)源的期刊評(píng)價(jià)研究
        雙周圖表
        足球周刊(2016年14期)2016-11-02 10:54:56
        雙周圖表
        足球周刊(2016年15期)2016-11-02 10:54:16
        雙周圖表
        足球周刊(2016年10期)2016-10-08 18:30:55
        圖表
        世界博覽(2016年16期)2016-09-27 18:25:26
        基于真值發(fā)現(xiàn)的沖突數(shù)據(jù)源質(zhì)量評(píng)價(jià)算法
        分布式異構(gòu)數(shù)據(jù)源標(biāo)準(zhǔn)化查詢?cè)O(shè)計(jì)與實(shí)現(xiàn)
        午夜一级在线| 免费无码不卡视频在线观看| 久久精品国产精品国产精品污| 亚洲国产成人91| 精品少妇后入一区二区三区| 97精品人妻一区二区三区在线| 色婷婷五月综合久久| 亚洲肥老熟妇四十五十路在线| av在线免费观看你懂的| 国产黄色三级一区二区三区四区| 国产七十六+老熟妇| 久久人妻公开中文字幕| 精品久久久亚洲中文字幕| 国产一区白浆在线观看| 又大又粗又爽18禁免费看| 亚洲国产夜色在线观看| 少妇激情一区二区三区| 国产无套内射又大又猛又粗又爽| 亚洲av之男人的天堂网站| 国产一区二区精品久久凹凸| 中文字幕人妻av一区二区| 亚洲国产精彩中文乱码av| 国产精品熟妇视频国产偷人| 搡老女人老妇女老熟妇69| 精品国产a一区二区三区v| 毛片内射久久久一区| 亚洲成在人线电影天堂色 | 国产丝袜美腿一区二区三区| 国模冰莲极品自慰人体| 中文乱码人妻系列一区二区| 国产一区二区亚洲av| 免费人成视频网站网址| 久久久久亚洲精品无码网址色欲| 精品亚洲少妇一区二区三区| 蜜乳一区二区三区亚洲国产| 巨人精品福利官方导航| 久草国产视频| 成人爽a毛片免费网站中国| 日韩人妻ol丝袜av一二区| 久久精品国产亚洲av瑜伽| 中文字幕高清一区二区|