基于HTML的ECharts的動(dòng)態(tài)數(shù)據(jù)顯示前端設(shè)計(jì)

洪敏　吳紅亞　楊保華

摘 要： 在大數(shù)據(jù)時(shí)代，信息圖表和可視元素用在一起時(shí)，能夠更快地得到問題的答案。傳統(tǒng)的靜態(tài)網(wǎng)頁已經(jīng)無法滿足這個(gè)充滿數(shù)據(jù)的時(shí)代，動(dòng)態(tài)網(wǎng)頁數(shù)據(jù)動(dòng)態(tài)顯示的前端開發(fā)成為新的熱點(diǎn)。文章根據(jù)某刀具加工生產(chǎn)管理系統(tǒng)，介紹了使用Echarts圖表在網(wǎng)頁前端中的應(yīng)用效果，分析各類圖表的功能與作用，使得動(dòng)態(tài)網(wǎng)頁成為大數(shù)據(jù)的可視化的承載體，同時(shí)完成了一個(gè)基于HTML與Echarts的動(dòng)態(tài)數(shù)據(jù)顯示前端設(shè)計(jì)。

關(guān)鍵詞： 大數(shù)據(jù)； HTML； Echarts； 動(dòng)態(tài)網(wǎng)頁； 前端

中圖分類號(hào)：TP315 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1006-8228（2018）08-27-02

Design of dynamic data display front end using ECharts and HTML

Hong Min， Wu Hongya， Yang Baohua

（School of Information Engineering， Changzhou Vocational Institute of Mechatronic Technology， Changzhou， Jiangsu 213164， China）

Abstract： In the age of big data， the answers can be got quickly， when infographics and visual elements are used together. Traditional static webpage have not been able to satisfy this era of data， and dynamic webpage have become a new hot spot. Based on a tool processing production management system，the application effects of using ECharts charts in the front end of the webpage is introduced， the functions of various types of charts are analyzed， and a data visualization carrier for big data is realized by dynamic webpage，at the same time， a dynamic data display front end design using HTML and ECharts is completed.

Key words： big data； HTML； ECharts； dynamic webpage； front end

0 引言

大數(shù)據(jù)的數(shù)據(jù)可視化可以幫助企業(yè)做出準(zhǔn)確的決策，其承載體便是動(dòng)態(tài)網(wǎng)頁。動(dòng)態(tài)網(wǎng)頁中的內(nèi)容是可以隨著時(shí)間、環(huán)境或者數(shù)據(jù)庫操作的結(jié)果而發(fā)生動(dòng)態(tài)改變的，這一特性完完全全符合了當(dāng)今大數(shù)據(jù)時(shí)代數(shù)據(jù)量、信息量突增的特點(diǎn)[1]。同時(shí)憑借著Canvas的功能與效果[2-3]，Echarts能夠在散點(diǎn)圖中將上萬甚至上十萬的數(shù)據(jù)如一地展示出來。

本文的設(shè)計(jì)通過html5、css、echars三種技術(shù)實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)顯示前端，使得后臺(tái)在實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁時(shí)減少其工作量，同時(shí)讓動(dòng)態(tài)數(shù)據(jù)顯示更有動(dòng)感、美觀的展示效果。并且在數(shù)據(jù)的顯示上，配合鼠標(biāo)光標(biāo)的移動(dòng)擁有更直觀的展現(xiàn)方式。

1 關(guān)鍵技術(shù)

1.1 HTML5

HTML5是W3C與WHATWG共同開發(fā)而誕生的語言。HTML5的新特性基于HTML、CSS、DOM及 JavaScript[4]。對外部插件的需求同時(shí)也減少了。而且錯(cuò)誤處理能力更加優(yōu)秀了，也取代了更多腳本語言的標(biāo)記。

1.2 ECharts

Echarts是一個(gè)純JS的圖表庫[5]，可以流暢的運(yùn)行在PC端和移動(dòng)端上。運(yùn)用許多新技術(shù)，大大地增強(qiáng)了展示效果和視覺效果，同時(shí)使得用戶對互聯(lián)網(wǎng)數(shù)據(jù)信息能夠更方便地查詢、整合及添加等。

1.3 Adobe Dreamweaver

使用的開發(fā)軟件為Adobe Dreamweaver CC 2017，適用于多顯示器的支持，以擴(kuò)大工作區(qū)來提升工作效率。

2 設(shè)計(jì)與實(shí)現(xiàn)

2.1 設(shè)計(jì)目標(biāo)

國內(nèi)和國際主流瀏覽器種類多，內(nèi)核不統(tǒng)一，這樣的環(huán)境對前端開發(fā)是一個(gè)較大的難題，所以開發(fā)的前端應(yīng)該首先兼容多個(gè)主流的瀏覽器。同時(shí)，設(shè)計(jì)出美觀的布局與框架，將網(wǎng)頁需求的功能版塊設(shè)計(jì)完善便是本次開發(fā)的主要目標(biāo)。

2.2 功能模塊圖

本系統(tǒng)采用B/S結(jié)構(gòu)，系統(tǒng)的升級(jí)只需要在服務(wù)器端完成，更新軟件系統(tǒng)的數(shù)據(jù)庫、文件也只需更新服務(wù)器端。在系統(tǒng)維護(hù)時(shí)，只需要遠(yuǎn)程登錄服務(wù)器系統(tǒng)，減少了維護(hù)系統(tǒng)的成本和周期。

基于網(wǎng)站的總體設(shè)計(jì)，功能模塊如圖1所示。

2.3 環(huán)境搭建

要使用echarts圖表必須先把echarts.js文件導(dǎo)入Dreamweaver里面。首先在ECharts官網(wǎng)上獲取ECharts，在官網(wǎng)上有不同的版本，根據(jù)需求下載對應(yīng)的版本。把下載的echarts.js文件放入該網(wǎng)頁的文件夾內(nèi)。然后在Dreamweaver導(dǎo)入echarts.js文件。在該網(wǎng)頁源代碼的的部分聲明echarts.js文件，代碼如下：

因?yàn)镋Charts是一個(gè)純 JS的圖表庫，編寫或修改需要用到JS編程語言，所以在該網(wǎng)頁源代碼的的部分聲明使用JS編程語言，代碼如下：