用完百度开源的可视化神器，我总结了一下可视化经验

1前端

如何选择合适的可视化类型

可视化是借助图形化的方法，清晰有效地将数据展现出来。当有可视化需求时，咱们应该先了解需求是什么。

例如需求是查看“近六个月的销量状况”，首先咱们能够肯定这里会涉及两个维度展现，一个维度是时间序列（在这里是“近六个月”），另外一个维度是每月的销量。算法

展现两个维度的可视化方法不少，例如散点图、折线图、柱状图等，在这里很显然选择折线图较为合适，为何呢？由于折线图适合展现连续的时间序列数据，如图1所示。经过折线图，能够清晰观察出销量随时间的变化状况。bash

该折线图对应的具体代码以下：

   
   
   
    
    
             
    
    
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
   
   
   
    
    
             
    
    
option = { title: { text: '近六个月销量状况', left: 'center' }, xAxis: { type: 'category', data: ['2020-3', '2020-4', '2020-5', '2020-6', '2020-7', '2020-8'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330], type: 'line' }]};

图1　某商品近六个月销量状况

每种可视化都有其适合的应用场合，须要在明确要展现的信息以后合理选择可视化类型。这里简单总结下：

若是须要展现数据的分布状况，能够考虑散点图、箱线图、柱状图、直方图；微信
若是须要展现数据的变化趋势，能够考虑折线图和双轴图；app
若是须要展现对比效果，能够考虑柱状图、饼图、雷达图；机器学习
若是须要展现数据的部分与总体关系，能够考虑面积图、饼图、旭日图、堆积柱状图、矩形树图；编辑器
若是须要展现数据之间的关系，能够考虑散点图、气泡图、桑基图。学习
若是须要展现文本信息的重点，能够考虑词云图；测试
若是须要展现流程中每一步的转化状况，能够考虑漏斗图。优化

可视化配色需注意什么

若是想要本身搭配色彩，其实有不少能够优化和注意的点，总结以下。

若是是新手，建议直接使用色彩主题，由于色彩主题是专业人士设置搭配的，不只美观并且使用方便，无须本身花大量时间搭配。

若是本身搭配，极可能搭配好久也得不到想要的效果，因此，若是你以为某套色彩主题合适就大胆使用吧。ECharts提供了13种可选的色彩主题方案，如图2所示，点击左上角的下载主题便可下载使用。

图2ECharts的色彩主题

若是须要展现的内容有着符合人类感知的颜色，建议直接使用该颜色。例如红色常常和热力图的热量大小搭配使用，蓝色和降水量搭配使用。

例如，图3表明某设备在一周的不一样时间的内部温度热力值，温度越高，热力值越大。从图3中能够一目了然地观察出温度最高的时间是周日的上午九点（9a）。

图3　某设备在一周的不一样时间的内部温度热力值

通常来讲，标准的可视化看板至少须要6种颜色，若是配色不充分，在不一样可视化类型中会影响表达效果。

色彩三要素包括色相、明度和饱和度。色相就是咱们平时说的颜色，例如红色的花朵、绿色的树叶，这里的花朵和树叶就具备不一样的色相；明度指色彩的明暗程度，也是咱们平时说的颜色深浅度；而饱和度指的是色彩的鲜艳程度。

当有较多数据类别须要展示时，若是只是明度的变化，例如只有明度变化的渐变色，在表示和展示不一样元素单元时不可以明显区分，因此须要同时兼具色相和明度的变化，让用户经过视觉感觉更好的定位元素和数据，如图4所示。

当只须要展现某个单一指标数值大小比较和变化时，建议使用单一颜色的渐变效果，也就是颜色明度的变化表示数值大小，通常明度越大，表示的数值越小。

固然，你没必要彻底遵循以上的内容，只是做为参考和建议，由于不一样场景的可视化要求不一样，受众不一样，具体到某个场景和某个问题，有不少细节须要在实践中反复尝试并不断积累经验，搭配出更合适的色彩效果。

图4　同时兼具色相和明度变化的图

追求动态和酷炫效果有错吗

作可视化时，总但愿制做的内容能让人眼前一亮，因而不少人将“眼前一亮”理解为动态和色彩艳丽的酷炫效果。

首先，追求动态和酷炫的效果，自己并无什么问题，可是人们每每会由于可视化内容是动态而将注意力更多花费在动态内容上，例如某地区人口迁徙的图中有多条曲线链接迁入和迁出的地区，并加入箭头表明人们的迁入与迁出方向，可是为了酷炫，在曲线上加入某些图标（例如飞机图标）表明人口的流动方向。

首先，这幅图确实十分酷炫，可是冷静下来会发现各个地区的人口流向曲线已经交叉，会影响人们看图的直观判断，若是此时你再加上动态图标，会干扰人们的观察和判断，而将图标改成光束的传播效果是否是更好呢？因此善用图标可以对一幅可视化图的表现力锦上添花，滥用也会使结果拔苗助长。

除了动态，酷炫的色彩也是人们经常使用的，目的是为了让可视化再也不平淡无奇。例如在一个柱状图，对每个柱子填充一种颜色。你可能会问，为何不能用多种颜色填充呢？一种颜色太平淡了，多种颜色才能凸显这幅可视化！

若是你是这样想的，那么请思考一下柱状图的目的是什么？柱状图是为了表达数据的分布状况，因此它的关注点应该是柱子的高度，而不是柱子的颜色。固然，你能够用渐变色来增强柱子高度的展现，例如柱子越高颜色越深，这是合理的。

以上只是两个常见的例子，在咱们制做可视化时，对于动态和色彩的选择须要谨慎，你首先要明确为何使用这些？使用后比使用前有什么好处？若是能回答这些问题，再去使用。

除此以外，当数据量很大时，大量动态酷炫效果可能对前端渲染提出了挑战，因此须要根据实际状况测试和使用这些特效。

做者简介：

王大伟，毕业于华东理工大学，硕士学历，目前就任于平安金融壹帐通，从事数据挖掘算法工做，擅长ECharts、Python、天然语言处理、数据分析挖掘、机器学习。曾获微软最有价值专家（MVP）荣誉称号。屡次与微软Reactor合做开展线上线下公开课，曾为中国电信、海通证券等企业提供技术培训，线上线下课程累计学员超3万名。“数据科学杂谈”微信公众号创始人。

本文摘编于《ECharts数据可视化：入门、实战与进阶》

凹凸福利

老规矩， 限时400币带回家！

点击阅读原文直接兑换！

本文分享自微信公众号 - 凹凸数据（alltodata）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。