摘? 要：可視化是數(shù)據(jù)展示的一種形式。文章對在B/S軟件架構(gòu)下實現(xiàn)企業(yè)數(shù)據(jù)可視化進(jìn)行了研究，介紹了數(shù)據(jù)可視化的概念及其優(yōu)勢，分析了軟件開發(fā)所使用的前端技術(shù)以及企業(yè)數(shù)據(jù)可視化的數(shù)據(jù)展示形式，主要闡述了如何使用Echarts作為前端開發(fā)的數(shù)據(jù)可視化圖表庫，設(shè)計并實現(xiàn)了企業(yè)的營業(yè)數(shù)據(jù)、合作客戶畫像、企業(yè)能力畫像和合作伙伴分布的可視化展示。

關(guān)鍵詞：數(shù)據(jù)可視化;Echarts;Web前端開發(fā)

中圖分類號：TP311? ? ? ? ? 文獻(xiàn)標(biāo)識碼：A文章編號：2096-4706（2022）06-0090-04

Design and Development of Enterprise Data Visualization Based on

Echarts Technology

XU Mengya

（Jiangxi Vocational and Technical College of Information Application， Nanchang? 330043， China）

Abstract： Visualization is a form of data presentation. This paper studies the realization of enterprise data visualization under the B/S software architecture， introduces the concept of data visualization and its advantages， analyzes the using of front-end technology and data display form enterprise data visualization by the software development， mainly expounds how to use Echarts as a data visualization chart library in front-end development. It designs and realizes the visual display of enterprise business data， partner customer portrait， enterprise ability portrait and partner distribution.

Keywords： data visualization; Echarts; Web front-end development

0? 引? 言

在過去，數(shù)據(jù)通常使用Excel表格進(jìn)行匯總及展示，但這種方式的缺點也是顯而易見的，例如統(tǒng)計量大、耗時長、容易出錯、查詢不方便等等。隨著應(yīng)用軟件的數(shù)據(jù)量越來越大，為了滿足精準(zhǔn)分析、快速決斷的需求，越來越多的軟件都有對數(shù)據(jù)做可視化分析的開發(fā)需求，而在企業(yè)管理軟件的領(lǐng)域?qū)?shù)據(jù)可視化的需求尤其突出。

本應(yīng)用軟件是針對某企業(yè)開發(fā)的管理系統(tǒng)，該系統(tǒng)采用B/S軟件架構(gòu)，本文研究的是客戶端的設(shè)計與開發(fā)?？蛻舳隧撁骈_發(fā)主要以HTML5+CSS3+JavaScript為基礎(chǔ)，引入Echarts插件，結(jié)合FetchAPI動態(tài)讀取后臺數(shù)據(jù)，將數(shù)據(jù)以可視化的圖形展示在Web前端頁面，實現(xiàn)了對企業(yè)數(shù)據(jù)可視化的開發(fā)需求，達(dá)到了形象直觀地展示企業(yè)數(shù)據(jù)分析的目的。

1? 數(shù)據(jù)可視化

1.1? 數(shù)據(jù)可視化的概念

數(shù)據(jù)可視化主要研究數(shù)據(jù)的視覺表現(xiàn)形式，充分使用圖形、圖像、計算機(jī)視覺和用戶界面等方式組織、表達(dá)和顯示數(shù)據(jù)。其最早起源于18世紀(jì)，在經(jīng)歷了幾個世紀(jì)的發(fā)展后，數(shù)據(jù)可視化在軍事、航空航天、物理學(xué)、天文學(xué)和生物學(xué)等領(lǐng)域都展示了其重要作用 [1]。

1.2? 數(shù)據(jù)可視化的優(yōu)勢

人類從外界獲取信息時，有80%以上的信息是通過視覺系統(tǒng)獲取的[2]。將數(shù)據(jù)以圖形或圖表的形式展示，其最大的優(yōu)勢在于圖形可以直觀地表達(dá)數(shù)據(jù)間的關(guān)系與趨勢，大幅度提高閱讀者閱讀和理解數(shù)據(jù)的效率[3]。尤其是自2011年互聯(lián)網(wǎng)進(jìn)入大數(shù)據(jù)時代之后，人們需要從海量的數(shù)據(jù)中獲取有效信息，數(shù)據(jù)可視化技術(shù)則可以有效地幫助人們分析高緯度多來源的海量數(shù)據(jù)信息，并輔助人們做出一些即時的決策。就目前而言，常用實現(xiàn)數(shù)據(jù)可視化的技術(shù)有Excel、Tableau、Python等[4]。

2? 系統(tǒng)開發(fā)技術(shù)簡介

本企業(yè)管理系統(tǒng)采用B/S軟件架構(gòu)，服務(wù)器端開發(fā)基于SSM框架，主要負(fù)責(zé)從MySQL數(shù)據(jù)庫讀取數(shù)據(jù)，進(jìn)行數(shù)據(jù)統(tǒng)計并發(fā)送給客戶端;客戶端主要通過與服務(wù)器端通信交換數(shù)據(jù)，將數(shù)據(jù)以指定的形式進(jìn)行展示。本文中主要研究的是客戶端的設(shè)計與開發(fā)，以下是客戶端使用到的前端開發(fā)技術(shù)。

2.1? HTML5+CSS3+JavaScirpt

HTML5是最新的HTML標(biāo)準(zhǔn)，在HTML4.0的基礎(chǔ)上新增了一些新元素和新控件，例如用于繪制圖形的Canvas元素和SVG元素、用于多媒體播放的Video元素和Audio元素等等，以瀏覽器的原生能力替代了部分復(fù)雜的JavaScript代碼，降低了Web前端開發(fā)的難度。

CSS3.0是CSS的最新版本，在CSS2.1的基礎(chǔ)上新增了很多屬性和方法，例如圓角、陰影、變形、動畫、彈性盒子等等，使得以前需要使用圖片或JavaScript才能實現(xiàn)的效果，現(xiàn)在只需要幾行CSS3代碼就可以搞定，大大簡化了Web前端設(shè)計與開發(fā)的工作。此外，css3還新增了REM這個相對根元素字體大小的單位，使得網(wǎng)頁可以通過修改根元素的字體屬性成比例地調(diào)整網(wǎng)頁的尺寸，在分辨率各異的顯示設(shè)備上達(dá)到最優(yōu)的顯示效果。B86FCB7B-49CA-44AB-8AD0-41E3BF54ADD1

JavaScript是一款基于對象的、以事件驅(qū)動的解釋性編程語言，其特點是無須編譯可直接在瀏覽器解釋運行，目前在客戶端被大量使用，主要用于解決客戶端與服務(wù)器的交互問題。

2.2? Fetch API

Fetch API是目前前端開發(fā)的一種新技術(shù)，提供了獲取資源包括跨域請求的JavaScript接口。與ajax和axios基于XMLHttpRequest對象的封裝不同，使用Fetch API是一種原生JS的寫法。Fetch API的特點主要有以下幾個方面，一是采用了模塊化的設(shè)計，將一次請求的請求、響應(yīng)和狀態(tài)分散在多個對象上分別管理，避免將不同功能的代碼糅雜在一起，使得代碼結(jié)構(gòu)更加清晰;二是請求資源的返回結(jié)果是Promise對象，避免了回調(diào)函數(shù)的嵌套，使得代碼更加簡潔;三是通過數(shù)據(jù)流處理數(shù)據(jù)，對于請求一些大的文件資源可以實現(xiàn)分塊讀取，減少了內(nèi)存占用情況，有利于提高網(wǎng)站的性能表現(xiàn)。

2.3? Echarts技術(shù)

Echarts是一款基于JavaScript的開源可視化圖表庫，可以提供形象直觀、交互個性化的數(shù)據(jù)展示，其最初由百度團(tuán)隊開源，后捐贈給Apache基金會，于2021年成為Apache頂級項目。Echarts提供的可視化圖表類型非常豐富，其中常規(guī)的圖表有折線圖、柱狀圖、餅圖、散點圖，其他圖表則包含了用于數(shù)據(jù)統(tǒng)計的盒形圖，用于地理數(shù)據(jù)可視化的地圖、熱力圖、線圖，用于關(guān)系數(shù)據(jù)可視化關(guān)系圖、Treemap、旭日圖，用于BI（商業(yè)智能）的漏斗圖、儀表盤等等，同時Echarts還支持各種圖形之間的相互搭配，可以完全滿足Web前端實現(xiàn)數(shù)據(jù)可視化的需求。

3? 企業(yè)數(shù)據(jù)可視化分析與設(shè)計

由于可視化的圖表種類非常多，每一類圖表對于數(shù)據(jù)的展示都具有各自的優(yōu)勢，將要達(dá)到形象直觀的可視化效果，必須根據(jù)數(shù)據(jù)特點選擇合適的圖表。通過對系統(tǒng)的企業(yè)運行數(shù)據(jù)進(jìn)行分析，本企業(yè)管理軟件需要可視化展示的數(shù)據(jù)包括企業(yè)營業(yè)金額、合作伙伴分析、合作客戶畫像和企業(yè)能力畫像。

在需要展示的4項數(shù)據(jù)中，企業(yè)營業(yè)金額要展示給管理者的是企業(yè)經(jīng)營增長或減少的情況，使用傳統(tǒng)的柱狀圖和折線圖最能展示出數(shù)據(jù)的增長或減少;合作客戶畫像要展示給管理者的是企業(yè)合作客戶類型的占比分析，如年齡段、性別等，使用傳統(tǒng)的餅圖可以直觀看出哪一項數(shù)據(jù)占比最大;企業(yè)能力畫像要展示給管理者的是企業(yè)當(dāng)前的一些能力指數(shù)，包含創(chuàng)新能力、產(chǎn)業(yè)結(jié)構(gòu)、營業(yè)能力、區(qū)域均衡、質(zhì)量評估五方面指數(shù)，使用雷達(dá)圖能夠直觀地看出各項數(shù)據(jù)之間的均衡或差距;合作伙伴分析要展示給管理者的是合作企業(yè)的分布情況，以便管理者可以直觀地看到與企業(yè)業(yè)務(wù)來往最頻繁的區(qū)域，使用地理地圖搭配地理坐標(biāo)的散點圖和線路圖最能直觀顯示出數(shù)據(jù)在地理坐標(biāo)上的分布情況。

4? 企業(yè)數(shù)據(jù)可視化實現(xiàn)

4.1? Echarts的基本使用

Echarts作為一個開源的JavaScript圖表庫，其基本用法可通過5步實現(xiàn)：（1）將Echarts圖表庫使用