攻防数据可视化，我小睿又厉害了！

今天，小睿给大家带来的是基于ECharts4.0，Vue2.0的一套可视化组件库：Screen-Show。在介绍她之前，想先聊聊数据可视化。

数据可视化

数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。但是，这并不就意味着，数据可视化就一定因为要实现其功能用途而令人感到枯燥乏味，或者是为了看上去绚丽多彩而显得极端复杂。数据可视化与信息图形、信息可视化、科学可视化以及统计图形密切相关。当前，在研究、教学和开发领域，数据可视化乃是一个极为活跃而又关键的方面。“数据可视化”这条术语实现了成熟的科学可视化领域与较年轻的信息可视化领域的统一。

为什么要做到数据可视化

人类用视觉获取到的信息量是远远高于其他器官的，人类对图像等的超强识别能力和记忆能力是与生俱来的。据科学统计，人类对图像的处理速度要比文本快6万倍，大量的视觉信息会在潜意识阶段处理完成。与此同时，通过数据可视化，人们可以更直观的感受到数据的变化；将一些信息处理为可视化信息，更有利于人们去做分析对比。

Web端数据可视化库

数据可视化的应用场景非常广，在这里，找了Web端一些stars排名靠前的JavaScript可视化库以及它们的github地。

○D3：

https://github.com/d3/d3

○Chart.js：

https://github.com/chartjs/Chart.js

○Highcharts：

https://github.com/highcharts/highcharts

○Echarts：

https://github.com/apache/incubator-echarts

○Leaflet：

https://github.com/Leaflet/Leaflet

○Vefa：

https://github.com/vega/vega

○Antv：

https://github.com/antvis

○three.js：

https://github.com/mrdoob/three.js

Screen-Show

Echarts是百度一个很受欢迎的开源项目，底层依赖轻量级的矢量图形库ZRender，提供了丰富功能的图表，SVG和Canvas双引擎。在今年3月份，全球著名开源社区Apache宣布百度ECharts全票通过进入Apache孵化器。Screen-Show是根据不同场景下的业务需求封装了它的一套用于大屏展示的Vue组件库。

为什么封装它

在前端开发项目（可视化数据页面和图表）时，需要根据不同的业务需求去写图标和页面，Echarts在创建各个图表时，它是根据不同的option来进行render的，Vue可以使得人们可以写一些高质量可复用的组件来提高开发效率，但在开发过程中，如果为某一个图表都去写一个组件，并且写一大堆重复对配置信息，似乎并不太优雅。

于是乎，Screen-Show就应运而生了。

About

将Echarts4.0的生命周期和Vue2.0的生命周期钩子结合起来，并且注册onresize事件之后，在页面加载和更改时就能够正确的渲染出来；在组件销毁时，会移除监听事件以及销毁图表，回收内存。

利用Vue的特性，将所有的最基本的配置信息封装起来，通过Vue提供的APImixins，将最底层封装混入到不同类型的图标组件中，然后再根据不同类型的图表进行个性化的封装，对数据格式进行了封装处理，将不同类型的图标封装为可复用的组件。这样，你不再需要进行繁琐的配置，只需要传入指定的友好的数据格式，就会看到你预期的效果。

导出时小睿提供了install方法，方便在开发可以直接use来使用，同时也导出了单一模块使得可以按需引入。打包方面小睿使用了目前流行的webpack进行打包，配置了libraryTarget：umd,以便直接使用script标签直接引用。

// 导出部分代码

import SsLine from './components/ss-line'

import SsBar from './components/ss-bar'

const SsComponents = {

SsLine,

SsBar

}

const install = function (Vue,options) {

Object.keys(SsComponents).forEach((ss)=>{

Vue.component(ss,SsComponents[ss])

})

}

if (typeof window !== 'undefined' && window.Vue) {

install(window.Vue);

}

export {

SsLine,

SsBar,

install

}

How to use

说了这么多，下面给大家看几个应用的例子

安装

考虑到打包过大，在使用它之前，你需要单独引入或者按需引入Echarts。

npm i screen-show -S

使用

// main.js

import Vue from 'vue'

import Echarts from 'echarts'

import ScreenShow from 'screen-show'

import App from './App.vue'

Vue.use(ScreenShow)

new Vue({

el: '#app',

render: h => h(App)

})

示例

折线图和柱状图

通过Echarts的官方文档,我们不难发现，折线图和柱状图配置是一样的，只是type不同。

渲染结果：

饼图组件

将饼图pie封装到了一起，根据不同的type可以展示不同的效果。比如小睿需要展示近期攻击类型Top5的占比。

渲染结果：

地图组件

将地图chart封装到了一起，根据type不同来render不同的内容。

渲染结果：

注意：并不是所有的业务场景都能预知，因此，Screen-Show也内置了一个prop：settings来进行扩展。如果你发现效果满足不了你的需求，可以根据Echarts的官方文档传入你需要的配置项来进行定制化的开发。

最后，来看看小睿用它做的一个页面。

怎么样，高大上有木有？！

攻击数据、攻击趋势一目了然！

真正实现攻防情况透明化，

没错了，

就是想告诉你，

我睿盾，又厉害了！！！

“睿盾资讯”

“睿盾资讯”是专业抗DDoS信息分享平台，汇聚政企、金融、游戏、视频等行业的网络安全解决方案、攻击态势一手资讯、抗D前沿技术分析。平台拥有云清联盟、C-CSA等多个专业信息渠道，为用户提供最具价值内容。