Echarts在移動數(shù)據(jù)通信中的應(yīng)用

【摘 要】為了改善用戶對流量的模糊定義的現(xiàn)狀，通過采集流量數(shù)據(jù)，利用Echarts工具，介紹了Echarts混搭、拖拽重計算、數(shù)據(jù)視圖、動態(tài)類型切換、圖例開關(guān)等特點。研究了流量去向的問題，分析了Echarts語言對數(shù)據(jù)做出的柱狀圖和線狀圖的視圖效果。實驗證實Echarts工具能夠以視圖的形式生動地展示流量的變化問題，提醒用戶數(shù)據(jù)流量問題。

【關(guān)鍵詞】可視化 HTML Echarts 移動數(shù)據(jù)通信

doi：10.3969/j.issn.1006-1010.2016.20.010 中圖分類號：TN919.81 文獻標志碼：A 文章編號：1006-1010（2016）20-0050-04

1 引言

現(xiàn)代社會高速發(fā)展，科技發(fā)達，信息流通，大數(shù)據(jù)已然是這個高科技時代的產(chǎn)物。大數(shù)據(jù)時代下，需要對大批量數(shù)據(jù)進行總結(jié)、發(fā)現(xiàn)其規(guī)律，可視化是能顯示數(shù)據(jù)規(guī)律的最好方法。信息可視化具有交互性強、數(shù)據(jù)顯示多維性的特點。隨著技術(shù)的不斷改進，催生了許多可視化的工具。不同的可視化工具針對不同的情況能夠發(fā)揮其應(yīng)有的價值。目前，百度剛推出的Echarts可視化工具以其多功能的特點，受到廣泛的關(guān)注。

在互聯(lián)網(wǎng)高速發(fā)展的今天，移動通信將世界織成一張網(wǎng)。隨著科技信息的不斷發(fā)展，移動通信進入到4G時代。移動通信技術(shù)具有傳輸速度更高、通信服務(wù)多元化、智能化程度更高、兼容性良好等特點。移動通信4G技術(shù)可以不考慮時間、地點等因素的限制，使用戶可以在任何地點、任何時間創(chuàng)建網(wǎng)絡(luò)平臺，享受流暢的服務(wù)，同時可以隨時隨地接入寬帶。4G移動通信技術(shù)不僅將網(wǎng)絡(luò)環(huán)境大大改善，還可以對數(shù)據(jù)進行跟蹤定位以及無線遠程控制，成為多功能的寬帶移動多媒體信息體系。

移動通信用戶不斷壯大的同時，隨之而來的就是一系列的問題。流量使用多少的問題是需要大家尤為關(guān)注的。每到月末用戶對自己的流量使用情況以及使用方式比較關(guān)心，本文將運用Echarts工具結(jié)合移動通信對數(shù)據(jù)流量的使用量進行可視化分析，讓數(shù)據(jù)用圖表說話。

2 Echarts的功能分析

Echarts即Enterprise Charts商業(yè)產(chǎn)品圖表庫，它是由百度商業(yè)前端數(shù)據(jù)可視化團隊開發(fā)出來的，底層基于Zrender是一個全新的輕量級Canvas類庫。Echarts開源組件是基于HTML5 Canvas的純Javascript繪制圖形的方法。Echarts是新型的可視化工具，是由坐標系、圖例、提示、工具箱等基礎(chǔ)組件構(gòu)成，并可以在此構(gòu)建出折線圖、柱狀圖、散點圖、K線圖、餅圖、雷達圖、地圖、和弦圖、力導布局圖、儀表盤以及漏斗圖，它同時支持任意緯度的堆積和多圖表混合表現(xiàn)。Echarts支持IE6/7/8/9+、chrome、firefox、safara等多個瀏覽器。

Echarts具有多種功能和炫酷的視圖效果，能夠滿足用戶的多種需求。Echarts具有混搭、拖拽重計算、數(shù)據(jù)視圖、動態(tài)類型切換、圖例開關(guān)、數(shù)據(jù)區(qū)域選擇、多圖聯(lián)動、值域漫游、炫光特效、大規(guī)模數(shù)據(jù)模式、動態(tài)數(shù)據(jù)添加、標線輔助多維度堆積、子區(qū)域地圖模式、GeoJson地圖擴展、標注&標線、事件交互、百搭時間軸等特點。

本文研究Echarts對手機流量進行的可視化統(tǒng)計，針對這一情況，通過實驗的方式進行驗證應(yīng)用。對于數(shù)據(jù)的統(tǒng)計分析，選擇使用Echarts工具，在使用Echarts工具前，需要引入Echarts。引入Echarts有多種方式，其中包括模塊化包引入、模塊化單文件引入、標簽式單文件引入等方式。本次實驗采用的是模塊化單文件引入。

對于模塊化單文件引入，如果使用模塊化開發(fā)但并沒有自己的打包合并環(huán)境或者說不希望在項目里引入第三方庫的源文件，建議使用單文件引入，同模塊化包引入一樣，需要熟悉模塊化開發(fā)。其具體步驟如下：

（1）新建一個echarts.html文件，為Echarts準備一個具備大?。▽捀撸┑腄om。

（2）新建