外包干了三个月，我跑路了....数据可视化综述篇

一、文章内容

• 了解数据可视化基础
• 生活中的可视化例子
• 前端可视化库(Echarts)
• 基于Echarts的实战环节

二、可视化的基础

什么是可视化？

可视化分为静态和动态的可视化还有带交互的可视化.
可视化（Visualization）是利用计算机图形学和图像处理技术，将数据转换成图形或图像在屏幕上显示出来，再进行交互处理的理论、方法和技术.

通俗来讲将数据想办法通过图标展现将复杂的文字和二维图标通过可视化技术展现为柱状图，折线图可以清晰直观地发现数据的异常值和平均数等等信息,省去了从复杂的文字中寻找信息.增强理解,发觉规律,复杂简单化.

为什么要可视化？

一句话就是为了方便观察数据,让数据结合技术栈实现动态交互快速查看数据,减轻研究者的工作压力.

可视化的原则

1. 忠于发言人的语言：只能如实记录发言人的原话，应口语化，不宜予以过度加工、过度书面语。
2. 能图形化时，尽可能使用图形化、草图化。
3. 兼顾效率：不擅长画图的facilitator（引导者）可采取文字记录的方式。

可视化的注意事项

1. 大多使用大白纸记录（或A1幅面的大白纸，或称海报纸，或专用的56cm×85cm白板纸，注意，是用于白板的“白板-纸”，不是印刷行业专用的“白色-板纸”，后者因为是板纸，厚度惊人、重量不菲，使用不便）。
2. 视不同情形，会结合使用报事贴（post-it，或称“便利贴”），尤其是需要将讨论内容移动位置时，采取报事贴会比较方便。
3. 善用颜色：最常用的方式是使用3种或3种以上颜色的白板笔，以利于全体研讨者能看清。一般会规定每种颜色的用途，以统一风格。常用的方式：蓝色笔书写标题，黑色笔书写正文，红色笔用于标注/修订等。不使用记号笔的原因：避免无意中的污染，难以清理。
4. 关注细节：字体要足够大，若研讨人数达到30人以上时，需考虑最后一排人群应该能够看清文字；字体建议使用楷体或行楷，避免使用草书等难以辨认的字体；报事贴不要用反、旋转，保持统一、美观，避免干扰思考。

三、生活中的可视化

虽然可视化听起来距离我们听起来十分遥远,但是在我们生活中却处处充满着可视化的例子,比如手机存储空间分布,如图1所示.

图1 存储管理

再比如地图,公交路线图、水银温度计、石英钟表等等....还有好多我就不一一列举了.

三、前端可视化库

• d3.js
• vega
• g2
• Three.js (3d)
• echarts
• antv
  其中Echarts最简单上手，本文的核心重点也是Echarts讲解.其他库大家可以自信了解,这里不做过多解释.
  介绍echarts的原因有一点因为它简单,交互性好.

Echarts如何使用

简单了解echarts的身世，由百度开发后来交给一个基金会运营.是一个基于JavaScript的开源可视化表.
接着打开官网如图2所示 1.点击快速入门.

图2 echarts官网

2.选择下载echart.JS的库或者在线引入cdn,我选择cdn因为方便.cdn如下;

<script src = 'http://lib.baomitu.com/echarts/5.3.3/echarts.common.min.js'></script>
1

3.写html结构写一个divid为main,加个内联样式使得这个div有高有宽,作为显示图标的容器.
3.编写JavaScript脚本进行配置echarts；如何配置呢？echarts里有个方法是init初始化,调用这个方法传入你想要展现的div容器,并且保存为mychart,比如这里是id为main的div,这一个阶段为操作dom，然后配置option，最后一步调用mychart.setOption(option)即可实现简单的echarts实现了.编写JavaScript的脚本流程图如下;

具体option里的内容如下title是标题；图例：legend；x轴的属性：xAxis；y轴的数据：yAxis；数据项和图标类型：series.大概这几个就是核心内容了.
optio的代码如下：

var option = {
          title: {
            text: 'ECharts 入门示例'
          },
          tooltip: {},
          legend: {
            data: ['销量']
          },
          xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }
          ]
        };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

看到这里有的读者就会吐槽了这跟没讲有什么区别吗?
哈哈当然光看这个案例不够的，需要大家明白基本含义去echarts官网查找相关案例替换数据使用,我当时就是这么学的.亲自动手效果最好.官方文档案例:[Examples - Apache ECharts].(https://echarts.apache.org/examples/zh/index.html)

如何使用官方文档高效率学习

首先打开官网的案例库，然后找到你想实现的图表，比如我想实现南丁格尔图，如图3所示，然后我找到男丁格尔图然后打开，选择自己熟悉的编程语言-一般可以选择JavaScript和typescript,然后直接点击完整代码，如图4所示.复制到本地中然后修改配置项即可轻松上手了.结果如图5所示.

图3 案例

图4 完整代码

图5 本地效果

五、总结

通过本文可以简单的了解可视化的基本概念和可视化需要注意的内容，然后介绍了前端可视化的库，接着介绍了echarts的简单上手和如何使用Echarts官方文档进行高效的学习，有不懂的地方欢迎留言.