基于Echarts技術的企業數據可視化的設計與開發

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

關鍵詞：數據可視化;Echarts;Web前端開發

中圖分類號：TP311? ? ? ? ? 文獻標識碼：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? 引? 言

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

本應用軟件是針對某企業開發的管理系統，該系統采用B/S軟件架構，本文研究的是客戶端的設計與開發。客戶端頁面開發主要以HTML5+CSS3+JavaScript為基礎，引入Echarts插件，結合FetchAPI動態讀取后臺數據，將數據以可視化的圖形展示在Web前端頁面，實現了對企業數據可視化的開發需求，達到了形象直觀地展示企業數據分析的目的。

1? 數據可視化

1.1? 數據可視化的概念

數據可視化主要研究數據的視覺表現形式，充分使用圖形、圖像、計算機視覺和用戶界面等方式組織、表達和顯示數據。其最早起源于18世紀，在經歷了幾個世紀的發展后，數據可視化在軍事、航空航天、物理學、天文學和生物學等領域都展示了其重要作用 [1]。

1.2? 數據可視化的優勢

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

2? 系統開發技術簡介

本企業管理系統采用B/S軟件架構，服務器端開發基于SSM框架，主要負責從MySQL數據庫讀取數據，進行數據統計并發送給客戶端;客戶端主要通過與服務器端通信交換數據，將數據以指定的形式進行展示。本文中主要研究的是客戶端的設計與開發，以下是客戶端使用到的前端開發技術。

2.1? HTML5+CSS3+JavaScirpt

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

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

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

2.2? Fetch API

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

2.3? Echarts技術

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

3? 企業數據可視化分析與設計

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

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

4? 企業數據可視化實現

4.1? Echarts的基本使用

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