基于SVG、Echarts的数据可视化分析

佟宇涵 朱欣彤 张文静

(沈阳工学院信息与控制学院，辽宁 抚顺 113122)

数据可视化最先始于1960年的计算机图形学，人们使用计算机创建图形图表，可视化提取出来的数据，将数据的各种属性和变量呈现出来，随着计算机硬件的发展，人们创建更复杂、规模更大的数字模型，发展了数据采集设备和数据保存设备。同理，也需要更高级的计算机图形学技术及方法来创建这些规模庞大的数据集。随着数据可视化平台的拓展，应用领域的扩大，表现形式也不断变化，增加了诸如实时动态效果、用户交互使用等内容。

1 网页数据来源分析与设计

1.1 网页数据来源分析

在如今，网络时代发展越来越快，使得同一网站可以汇集不同网址的数据，就比如当今最有名的京东网站，内部汇集有优品网、当当等诸多知名和其他不太知名的网站，在此就需要考虑到数据来源是否安全并符合相关条例标准(例如：是否是绿色网站及无恶意病毒，能够普及大众，数据来源与更新符合发展需求且透明化)，另要分析每个网站以及目前国内和世界的病毒分布与流经途径是否会影响到公司的发展与网站安全性，因此，本网页的主要数据来源于近2年病毒类型与攻击对象和流经省份，采自各网站对其统计，我们利用表格对其进行统计。最后，合计并整理利用可视化手段SVG与Echarts对其进行可视化处理。

1.2 网页设计

本网站设计的大体框架是当今最流行的bootstrap，由于bootstrap的网页兼容性能非常好，并在组件的契合度上设计得非常具有可视感。js的框架与结构大多数引用的是Echarts，使可视化动态效果显示更明显，更能凸显出来数据的来源与分析过程，由于经费原因，在本项目内并没有添加具体网站与解析域名等配置，因此在后期完善会考虑到上线与运维。

1.3 数据可视化流程与主要代码分析

在设计过程中由于需要安装Echarts，因此，需要在官方网站先下载到本地中通过运行cmd代码：$ npm install echarts-save进行安装，在index.js中通过写入：var echarts = require(‘./echarts/lib/echarts.js’)引入echarts模型，通过echarts模型进行可视化建模，再进行echarts初始化：var myEcharts = echarts init(document getElementById(‘echarts’)) 初始化完成后，写入数据进行对数据的可视化，首先对数据进行配置到js中，引入数据量，给定变量opoints

var opoints = [

title: {

text:′漏洞统计′,

subtext:′Topsec发布′,

x:′center′

},

tooltip: {

trigger:′item′,

formatter: ″{a}
{b} : {c} ({d}%)″

},

…(此处省略部分代码)

}

}]

后进行绘图，使用map对地图进行绘制与地址配置。

1.4 数据分析

在安全评分中可看出，在近几年内数据库访问安全性大多数处于正常范围：70-85，也有极少次数处于85-100危险范围，可知近几年内国内数据库的安全性还需要进一步提高，安全性能要进一步加强。从动态走向可知，电脑病毒大多数来源于北京、广州、上海等人口高密度地区，而受感染的地域主要分布于成都、重庆、合肥、长春等集散型地区。由此可知，在病毒传播过程更应注意高密度人群的地区对集散型地区的影响，应在此过程加强防范措施。从威胁排名可以得出，Ddos对电脑攻击居多，其次是普通病毒、SQL注入等。

2 结束语

通过Echarts和SVG对数据进行可视化，使人们对数据分析更方便、更清楚，利用相关代码使页面对数据可视化变得十分容易，并通过此方式使人们得知网络安全重要性，并了解到近几年电脑病毒的主要分布区域和主要攻击对象，使人们更加清楚地了解网络病毒的危害，提高人们的网络安全意识。