#yyds干货盘点#数据可视化总结

Posted 2022-10-31

最近在做可视化相关的项目，借这篇文章今天谈谈数据可视化相关的技术解决方案。

数据可视化旨在借助于图形化手段，清晰有效地传达与沟通信息（来源于bd）.在我们生活中最常见的，就有各种统计数据做成图表、股票k线图、能力雷达图这些（上面那张个人能力分析图，图片数据纯属虚构）；而对于前端开发者来说，就是用一些大神开发好的可视化图表组件将后端传过来的数据用一种直观，清晰的方式呈现在浏览器中，常用的可视化图表图库包括（排名不分先后），后面文章中都是围绕Echarts库的运用：

• D3
• Echarts
• three.js
• HighCharts
• Charts
• G2

色彩

做可视化自然离不开色彩的应用，色彩的应用作为数据可视化重要的部分，同样的数据，同样的图表类型，如果不同的人或者不同的公司做出来，有可能呈现的效果会截然不同，这其中的重要区别可能就是色彩的应用。Echarts不同的图表，都提供了一套默认的主题色，所以尽管我们不设置颜色，其呈现的效果也还是不错的。

关于每个部分在option怎么设置，Echarts的配置手册都有详细描述，这里主要说一些工作中不常用到但又很关键的部分。从实现层面上来讲，颜色的设置分两种，option属性设置和css样式设置，至于为什么，可以从上图的dom结构得到答案，每个Echarts实例大体都包含两个元素：canvas 和 div（方框标注部分），div负责图表tooltip的展示(黄色框圈起部分)，而canvas负责除黄色框以外的所有部分。如果是简单的颜色设置，如上面的展示的那张标注图，option属性设置color就足够了，但如果要做出下图所示的强调色，option属性设置color就显得捉襟见肘了，在标题和tooltip的数据显示上，应用了混合色用以加强数据的表现：

​对于tooltip中的强调色，由于其根本是dom元素的操作，所以要做出上图所示的效果很简单，控制div元素及其子元素的样式就可以了，like：

option = 
        tooltip: 
          trigger: axis,
          backgroundColor: rgba(0,0,0,.8),
          textStyle: 
            color: #b4d1e6
          ,
          /*formatter属性的应用，直接行内css样式操作*/
          formatter: function (val) 
            return val[0].name + :<span style="color:#ffbf00;font-weight: bold;font-size:14px;padding: 0 5px;" > + addSeparator(val[0].data) + 个</span>
          
        
        ...其他设置
     

而对于标题或则图表其他部分要进行混合色的设置，就不是那么简单了，因为其不接受tooltip那种dom元素的直接样式操作，但Echart还是留了足够多的入口来解决这样的需求：富文本标签（rich），​​官方讲解​​​，比如上面那一段混合色的标题，可以这样来实现，代码拷贝到​​官方demo​​​，即可查看效果,更多用法可查看​​官方示例​​：

title:
          show:true,
          left:center,
          top:15,
          text:a|2017年全省应聘人员总数统计:b|165,338c|人,
          textStyle :
            rich: 
              a: 
                color: #8bb8e8,
                fontSize: 14,
                fontWeight: bold
              ,
              b: 
                color: #ffcf2a,
                fontSize: 16,
                fontWeight: bold
              ,
              c: 
                color: #8bb8e8,
                fontSize: 14,
                fontWeight: bold
              
            

         

地图的应用

Echarts地图，其可以设置为geo地图引擎或百度地图引擎，好像其他地图也支持，只要你知道坐标系的转换关系。geo地图由于部分数据不符合国家《测绘法》规定，目前暂时已经停止下载服务，不过你想找，还是能找到，比如Echarts github账号下。地图表面上在充当一个图表的背景，实际上其更多的作用是作为一个坐标系-经纬度坐标系。关于Echarts geo地图的使用，个人有几点经验分享一下：

• geo的设置的必要性，前面说过，geo其实存在的重要的作用是作为图表坐标系。所以当你的series存在多个系列需要在同一个坐标系能设定数据，那设置geo是非常有必要的。但值得注意的是，一旦系列中设置了全局geo为参考坐标系，即指定了geoIndex,那么series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性；另外要强调的就是谨慎使用roam：true,最好设置一个缩放区间；
• 如果涉及到政府项目，对边界区域很敏感，则最好的选择就是使用Bmap作为地图坐标系；