基于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} (g0gggggg%)″

},

…(此處省略部分代碼)

}

}]

后進行繪圖，使用map對地圖進行繪制與地址配置。

1.4 數據分析

在安全評分中可看出，在近幾年內數據庫訪問安全性大多數處于正常范圍：70-85，也有極少次數處于85-100危險范圍，可知近幾年內國內數據庫的安全性還需要進一步提高，安全性能要進一步加強。從動態走向可知，電腦病毒大多數來源于北京、廣州、上海等人口高密度地區，而受感染的地域主要分布于成都、重慶、合肥、長春等集散型地區。由此可知，在病毒傳播過程更應注意高密度人群的地區對集散型地區的影響，應在此過程加強防范措施。從威脅排名可以得出，Ddos對電腦攻擊居多，其次是普通病毒、SQL注入等。

2 結束語

通過Echarts和SVG對數據進行可視化，使人們對數據分析更方便、更清楚，利用相關代碼使頁面對數據可視化變得十分容易，并通過此方式使人們得知網絡安全重要性，并了解到近幾年電腦病毒的主要分布區域和主要攻擊對象，使人們更加清楚地了解網絡病毒的危害，提高人們的網絡安全意識。