基于HTML的ECharts的動態數據顯示前端設計

洪敏　吳紅亞　楊保華

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

關鍵詞： 大數據； HTML； Echarts； 動態網頁； 前端

中圖分類號：TP315 文獻標志碼：A 文章編號：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 引言

大數據的數據可視化可以幫助企業做出準確的決策，其承載體便是動態網頁。動態網頁中的內容是可以隨著時間、環境或者數據庫操作的結果而發生動態改變的，這一特性完完全全符合了當今大數據時代數據量、信息量突增的特點[1]。同時憑借著Canvas的功能與效果[2-3]，Echarts能夠在散點圖中將上萬甚至上十萬的數據如一地展示出來。

本文的設計通過html5、css、echars三種技術實現動態數據顯示前端，使得后臺在實現動態網頁時減少其工作量，同時讓動態數據顯示更有動感、美觀的展示效果。并且在數據的顯示上，配合鼠標光標的移動擁有更直觀的展現方式。

1 關鍵技術

1.1 HTML5

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

1.2 ECharts

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

1.3 Adobe Dreamweaver

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

2 設計與實現

2.1 設計目標

國內和國際主流瀏覽器種類多，內核不統一，這樣的環境對前端開發是一個較大的難題，所以開發的前端應該首先兼容多個主流的瀏覽器。同時，設計出美觀的布局與框架，將網頁需求的功能版塊設計完善便是本次開發的主要目標。

2.2 功能模塊圖

本系統采用B/S結構，系統的升級只需要在服務器端完成，更新軟件系統的數據庫、文件也只需更新服務器端。在系統維護時，只需要遠程登錄服務器系統，減少了維護系統的成本和周期。

基于網站的總體設計，功能模塊如圖1所示。

2.3 環境搭建

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

因為ECharts是一個純 JS的圖表庫，編寫或修改需要用到JS編程語言，所以在該網頁源代碼的的部分聲明使用JS編程語言，代碼如下：