数据可视化入门指南
大数据时代是未来的发展趋势，了解数据可视化的设计技巧，让数据讲故事。本文主要是针对企业报表的数据可视化的设计方法论
数据可视化的意义
数据可视化就是把复杂的数据以图形化的形式将数据之间的潜在逻辑关系直观的展示出来，让枯燥的数据变得一目了然，用户或企业能从中挖掘更多的商业价值。
要探索或理解大型且复杂的数据，可视化是最有效的途径之一，图形化则是可视化呈现的有效设计手段，优秀的数据可视化图形会以这种“数字化叙事”的方式，通过设计之美有效地缩短信息的传达 ，告诉用户数据的意义。
可视化的应用场景
pc 端、iPad、移动端：用户主要以使用为主，简洁高效的传达数据内容的同时需减少长时间使用带来的眼睛过度疲劳，例如企业业务报表；
大屏设备：用户主要以观看为主，需要快速传达核心内容，大量数据展示清晰易懂，如科技展馆、数字展厅 ；
海报、杂志等媒介：用户主要以观看为主，主要运用信息插图对事物进行说明，让读者易理解。
不同的使用场景对应的用户属性、硬件设备、可视化诉求都不同，针对不同场景及用户的差异化需求，图表的展现形式也会有差异。
图表制作规范
根据业务目标结合数据维度确定数据关系——趋势、比例、分布、联系，选择一种最佳的图表呈现。图表类型有很多，常用的主要有以下6种基本类型：垂直条形图（柱状图）、折线图 、水平条形图 、饼图 、散点图 、地图。
垂直条形图
显示一段的离散型数据的变化。
直条的宽度约为条间距的1~2倍；
基准线不以0为起始线的条形图具有误导性，会增加对比度；
x轴的名称尽量不要倾斜，允许的情况下应该绘制成水平条形图。
当然也可以利用基准线不从0开始会增大差异这个特性达到某种目的，如下图，单从图形上来看米8的处理器跑分比友商高出约1一倍，实际数据却并非如此。
折线图
显示一段时间内的延续性数据不断变化的现象。
基准线最好从0开始，不从0开始的折线图走势会更激烈 ；
不要在折线下方着色，着色了就变成了面积图；
折线图的高度约占图表的三分之二；
不要绘制4条以上的折线，线条较多时只使用实线不需要标记圆点，尤其是折线之间交集比较多的，如果一定要有这么多条那就拆分成多个图表。
水平条形图
显示一段的离散型数据的变化。
尽量按顺序排序，可以让数据按大小排序或名称字母排序；
水平直方条很多、图表很高的情况下将直方条按3-5个分组显示；
有负值的情况下最好不要使用水平直方条，使用垂直直方图效果更好。
饼图
显示数据之间的比例关系。
饼图的大小应按从大到小顺时针方向排列；
切片最好不要超过十个，否则难以分辨，如果超过就把不重要的部分用“其他”代替；
不宜用三维图表示比例关系。
散点图
显示数据之间的关联性。
尽量在各个散点之间画一条趋势线把散列的数据关联起来；
散点图对比的变量比较多时拆分成多个散点图。
地图
显示数据之间的空间关系。
通常用来绘制和地域相关的数据或者容量；
常用与比较不同地区的覆盖率或显示一段时间内的变化；
地图轮廓保持简单。
图表绘制注意的问题
有数据缺失要慎重使用图表，缺失20%以上的数据用图表展示就会有一定的误差；
y轴不从零基线开始，视觉上具有一定的误导性；
离散值最好选用条形图；
图表要包含标题、图注、图例等让读者能清晰的读懂图表的意义，说明数据的来源会增强数据的可信度；
图表设计完成后要自查：否有异常值？数据维度是否合理？是否传递了正确的内容和意义；
对于有小数点的数据，进行合理的四舍五入；
采用无衬线字体，少用斜体字，从字号、颜色、字重进行区分保持信息层级清晰；
现有资源允许的情况下，配色方案要充分考虑到特殊人群（色盲）对图形的可读性。
配色方案
选择颜色时一定要考虑可视化的应用场景和受众，不同的颜色给人不同的心理感受。数据表中的颜色可以调动受众的情绪，明亮的配色能让人感到愉快和活力，较暗的配色更严肃和正式。
选择合适的颜色从色彩基本要素着手--饱和度、色相、明度，冷暖色。
配色的几种方案：
色环提取法：
a. 单一色相配色：明度差异要足够大，用户才能分辨出来，可以转换为灰度模式判断明度跨度是否合适；
b. 邻近色或同类色配色：当图表需要的颜色较多时，但最多不超过12种色相，过多的颜色让人眼花缭乱干扰数据的读取；
c. 对比色或互补色配色：图表需要的颜色较少时，尤其是具有对立属性的数据。
2. 仿自然色的渐变色：利用不同明度和色相的取色，能得到非常丰富的色板，同时给用户自然感。
设计步骤
先分析数据使用场景、数据规律、用户受众，再选择图表、颜色，初步完成表格可以加入适当的动效让数据视图变得灵动起来，图表设计完成之后根据图表设计目标来判断图表最终效果是否合理有效。
案例讲解
由于篇幅的原因这里我就以企业报表中的一个水平条形图为例。
项目背景是要在crm中增加商品销售报表，直观的展示近12个月商品销售情况，同时也要知道单个商品在12个月内的销售情况，为后期商品售卖策略提供依据。根据数据、场景、用户分析可知：
应用场景是pc端的crm系统业务报表；
主要使用人群是公司市场部和领导层；
数据维度是11种商品大类和12个月的销售金额；需要对数据进行排序，单个商品需要展示12个月的数据；商品名称的长短不一致。
由此选择水平条形图
接下来就是配色
进行配色之前需要思考以下一些问题：
如何用颜色区分这个12个月的数据;
颜色的色调是明亮的还是柔和的;
两两色块之间具有区分度，对比度多大合适性;
如果某个月份没有数据，其他的月份衔接颜色是否能区分。
如果用色不克制就会变成下图所示：
上图的感觉是太花太辣眼睛了，颜色喧宾夺主，视觉上根本就没办法集中在数据上，过多的颜色反而分散用户注意力干扰数据的读取。
那么针对上面的问题如何优化呢？
结合系统主色，适当降低颜色饱和度或者明度；
减少颜色种类，克制用色。
那么12个月的数据如何做到既能保持区分度的同时又能视觉上和谐？
寻找月份之间的共性，12个月细分四个季度使用四种颜色，不同月份之间采用不同色调进行区分，数据之间也增加了季度区分的属性；
两两颜色之间的饱和度、明度适当增大，让颜色在饱和度或者明度上面保持一定的规律，利用色相之间的自然过渡（邻近色相的过渡）组合起来；
多用冷色，避免整体看起来过于燥热，同时也体现数据的理性；
如此多的颜色色块显然条形图总长度按照从大到小的顺序排列更有利于读取数据；
按照以上方法先调整好色板，再统一填入图表中，把颜色填入后转为灰度模式查看对比度。
最后的图表效果如下：
再加上图表载入时的初始化动效，人机数据交互即鼠标悬浮单个色块时显示数据详情，基本单个图表可视化也就完成了。
资源推荐
阿里云DataV
网站链接：https://data.aliyun.com/visual/datav?
百度 Suger
网站链接：https://cloud.baidu.com/product/sugar.html
腾讯RayData
网站链接：https://cloud.tencent.com/product/raydata
Echarts -百度开源可视化库
网站链接：https://echarts.baidu.com/
蚂蚁AntV
网站链接：https://antv.alipay.com/zh-cn/index.html
FusionCool – 阿里出品的辅助工具，可下载导入sketch，这个插件做图表会特别高效
网站链接：https://fusion.design/tool
