Echarts在移动数据通信中的应用

总结、发现其规律，可视化是能显示数据规律的最好方法。信息可视化具有交互性强、数据显示多维性的特点。随着技术的不断改进，催生了许多可视化的工具。不同的可视化工具针对不同的情况能够发挥其应有的价值。目前，百度刚推出的Echarts可视化工具以其多功能的特点，受到广泛的关注。

在互联网高速发展的今天，移动通信将世界织成一张网。随着科技信息的不断发展，移动通信进入到4G时代。移动通信技术具有传输速度更高、通信服务多元化、智能化程度更高、兼容性良好等特点。移动通信4G技术可以不考虑时间、地点等因素的限制，使用户可以在任何地点、任何时间创建网络平台，享受流畅的服务，同时可以随时随地接入宽带。4G移动通信技术不仅将网络环境大大改善，还可以对数据进行跟踪定位以及无线远程控制，成为多功能的宽带移动多媒体信息体系。

移动通信用户不断壮大的同时，随之而来的就是一系列的问题。流量使用多少的问题是需要大家尤为关注的。每到月末用户对自己的流量使用情况以及使用方式比较关心，本文将运用Echarts工具结合移动通信对数据流量的使用量进行可视化分析，让数据用图表说话。

2 Echarts的功能分析

Echarts即Enterprise Charts商业产品图表库，它是由百度商业前端数据可视化团队开发出来的，底层基于Zrender是一个全新的轻量级Canvas类库。Echarts开源组件是基于HTML5 Canvas的纯Javascript绘制图形的方法。Echarts是新型的可视化工具，是由坐标系、图例、提示、工具箱等基础组件构成，并可以在此构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导布局图、仪表盘以及漏斗图，它同时支持任意纬度的堆积和多图表混合表现。Echarts支持IE6/7/8/9+、chrome、firefox、safara等多个浏览器。

Echarts具有多种功能和炫酷的视图效果，能够满足用户的多种需求。Echarts具有混搭、拖拽重计算、数据视图、动态类型切换、图例开关、数据区域选择、多图联动、值域漫游、炫光特效、大规模数据模式、动态数据添加、标线辅助多维度堆积、子区域地图模式、GeoJson地图扩展、标注&标线、事件交互、百搭时间轴等特点。

本文研究Echarts对手机流量进行的可视化统计，针对这一情况，通过实验的方式进行验证应用。对于数据的统计分析，选择使用Echarts工具，在使用Echarts工具前，需要引入Echarts。引入Echarts有多种方式，其中包括模块化包引入、模块化单文件引入、标签式单文件引入等方式。本次实验采用的是模块化单文件引入。

对于模块化单文件引入，如果使用模块化开发但并没有自己的打包合并环境或者说不希望在项目里引入第三方库的源文件，建议使用单文件引入，同模块化包引入一样，需要熟悉模块化开发。其具体步骤如下：

（1）新建一个echarts.html文件，为Echarts准备一个具备大小（宽高）的Dom。

（2）新建<script>标签，引入模块化单文件echarts.js。

（3）新建<script>标签中为模块加载器配置echarts和所需图表的路径（相对路径为从当前页面链接到echarts.js）。

（4）<script>标签内动态加载Echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成。在此需要设置option属性给图表设置数据，并对tooltip提示框、legend图例、calculable设置是否拖拽。其中需要注意的是option为数组元素。

3 Echarts实例应用

选择一台智能手机，记录这台手机的常用软件，经总结将其分为六类，分别为腾讯QQ、腾讯新闻、手机淘宝、支付宝、新浪微博、其他。记录其在11日到16日的流量使用情况，具体如表1所示。对于表中的数据，通过记录6天的数据使用情况，可以通过数据分析出数据流量的流向与流量。

现将部分标签展示如下：

Option={

Title：{

Text：‘某月手机流量统计’，

Subtext：‘数据来自统计 单位：MB’}，

Tooltip：{

Trigger：‘axis’，

axisPointer：{

type：‘shadow’}，

Legend：{

Data：[‘腾讯QQ’，‘腾讯新闻’，‘手机淘宝’，

‘支付宝’，‘微博’，‘其他’]}}}

总体效果如图1所示，从图1可以看出某一天中每个软件的流量使用累计量，点击某一天，会出现图1中的说明，对当天的信息进行全部显示。若想查看某一软件在最近几天的流量使用情况，点击上面的图例，可以通过图例的暗亮来控制图形的显示与隐藏。将所有的图例关闭，点击所要查看的图例，即可出现所要查看的图例。关闭所有图例，点击腾讯新闻，即可出现如图2所出现的图形信息。显示信息表示同一软件在11日至16日的使用情况。

柱状图描述计量资料的频数分布，能够使读者一眼看出各个数据的大小，易于比较数据之间的差别，能清楚地表示出数量的多少。折线统计图既可以反映数量的多少，更能反映数量的增减变化。从折线统计图上不仅可以看出数量增减变化，还可以根据曲线变化趋势分析产生的原因，推测下一阶段的数量变化情况。该实验通过Echarts作出其线状图，如图3所示，系统默认用不同颜色代表不同软件，折线的变化趋势可以看出每一种软件与其他软件的总体使用趋势和使用量多少的对比。关闭所有图例，打开某一图例如图4所示，可以单独查看某一软件的变化趋势。对于统计数据，若是存在变化，可以点击数据视图，会出现图5的情况，可直接查看数据并对数据进行编辑。

4 结束语

本文采用Echarts工具对数据流量进行可视化分析，分析结果以图表的形式展示出来。抓住4G移动通信技术在研发、推广和应用的机遇是我国通信行业的共识，Echarts与移动通信的结合实现了移动通信技术与其他领域的初步研究和开发工作，实现在不同种类的工作和不同类型的业务的应用。在今后的发展中，可视化的作用会愈加强大，可视化的功能愈发多样。与此同时，移动通信技术也在不断发展前进，两者结合迸发出的火花越发让人期待。

参考文献：

[1] 李再扬，吴名花，杨少华. 移动通信技术扩散的实证研究：基于中国1990—2012年的统计数据[J]. 当代经济科学， 2013（6）： 1-13.

[2] 张玉龙，李志峰，赵勋. 对4G移动通信技术应用与发展的展望[J]. 信息通信， 2013（1）： 226.

[3] 胡海明，董绍经，姜有田，等. 第四代移动通信技术浅析[J]. 计算机工程与设计， 2011（5）： 1563-1567.

[4] 施盛建. 4G移动通信技术的特点分析与实践应用[J]. 信息通信， 2014（1）： 231-232.

[5] 朱建华. 移动通信技术的发展、回顾和展望[J]. 电信科学， 2000（1）： 21-25.

[6] 胡俊. 数据挖掘可视化模型机器应用[D]. 北京： 北京交通大学， 2009.

[7] 雷蕾. 常用数据可视化技术分析[J]. 现代电视技术， 2014（9）： 137-139.

[8] 杨建业，耿建平. 基于HTML5的实时Web数据监测系统[J]. 桂林电子科技大学学报， 2015（2）： 136-141.

[9] 王锡良，卿光勇，武敬锋. 基于HTML5的数据图表在公共气象服务中的应用[J]. 电脑编程技巧与维护， 2015（15）： 75-76.

[10] 朱文. 基于HTML5 Canvas技术的在线图像处理方法的研究[D]. 广州： 华南理工大学， 2013.

[11] 李渊. 基于K-means算法的数据挖掘可视化技术的应用研究[D]. 北京： 北京交通大学， 2008.

推荐访问:信中 数据通 Echarts