数据可视化，我的经验总结（Echarts相关）

时间 2019-11-08

原文原文链接

数据可视化

最近掘金对图片作了域名保护，形成图片没法加载，仍是Segmentfault好，实力硬。
我的能力分析
数据可视化旨在借助于图形化手段，清晰有效地传达与沟通讯息（来源于bd）.在咱们生活中最多见的，就有各类统计数据作成图表、股票k线图、能力雷达图这些（上面那张我的能力分析图，图片数据纯属虚构）；而对于前端开发者来讲，就是用一些大神开发好的可视化图表组件将后端传过来的数据用一种直观，清晰的方式呈如今浏览器中，经常使用的可视化图表图库包括（排名不分前后），后面文章中都是围绕Echarts库的运用：css

D3
Echarts
three.js
HighCharts
Charts
G2

色彩的应用

色彩的应用做为数据可视化重要的部分，一样的数据，一样的图表类型，若是不一样的人或者不一样的公司作出来，有可能呈现的效果会大相径庭，这其中的重要区别可能就是色彩的应用。Echarts不一样的图表，都提供了一套默认的主题色，因此尽管咱们不设置颜色，其呈现的效果也仍是不错的。Echarts图表中可进行颜色设置的地方不少，包括但不只限于下图（官方demo）所示的内容：html

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

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

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，便可查看效果,更多用法可查看官方示例：github

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

         }
}

自动轮播（AutoToolTip）的应用

Echarts中的normal与emphasis,以及tooltip的加入，经过hover与unhover状态的切换，让图表多了一些交互。特别是上面提到的tooltip的自定义样式，让展现效果提高了一个档次。但做为前端可视化，不少时候显示在一个大屏幕上，用于参观展现用，因此参观展现的人是不大可能用鼠标一个一个hover来查看具体的数据，这就要求咱们须要用自动轮播来代替hover触发tooltip。为此，官方提供了dispatchAction方法与官方demo，也可参考网上一篇文章提供的思路和源码，封装一个图表通用的自动轮播工具，我本身也封装了一个，欢迎参阅,下面是map使用轮播时的效果图。
json

使用思路（Vue框架下使用）,首先将autoShowTip对象添加为Echarts的一个方法;而后在Echarts实例实例化以后，调用this.$echarts.AutoShowTip方法，并传入实例对象，option对象，轮播时间等参数：canvas

这里须要提醒两点：segmentfault

Echarts的dispatchAction方法对经常使用图表中的Radar图还不支持，我的知道支持的图表类型有：pie,bar,line,map,scatter系列；为解决Radar图的单轴hover与自动轮播，本身写了个方法，并将其也封装到autoShowTip对象中，具体的实现可参考我的博客的文章：从0开始撸一个支持单轴轮播的雷达图之末篇；

toolTip使用时，其显示的位置也是大有学问，好比下图左边所示，会弄巧成拙，因此控制tooltip的位置也很重要，Echarts也为此提供了相应的方法，好比加入下面这段代码，就能够达到右图所示的效果：后端

position: function (pos, params, dom, rect, size) {
           var obj = {top: '10%'}; //y轴方向，其位置固定
          // obj[['left', 'right'][+(pos[0] < size.viewSize[0] - 20)]] = 5;
           if (pos[0] > (size.viewSize[0] - 100)) {
             obj['right'] = 0;
           } else {
             obj['left'] = pos[0];
           }
           return obj;
         }

另外，自动轮播还能够更好的展现数据，当咱们数据过长，而展现空间有限时，咱们能够把数据切为两端甚至多段，经过自动轮播切换，这样就能够在有限的空间里，展示最好的效果，下面是我作的一个Demo，源码及效果图:api

myChart = this.$echarts.init(target);
   let step =0;
   option.xAxis.data = labelData.slice(0,length);
   option.series[0].data = realData.slice(0,length);
   option.series[1].data = symbolData.slice(0,length);
   myChart.setOption(option);
   this.$echarts.AutoShowTip(myChart, option, 3000,{
     refreshOption: function () {
       step = ((step + length)>labelData.length)?0:(step+length);
       let endStep = ((step + length)>labelData.length)?8:(step+length);
       option.xAxis.data = labelData.slice(step,endStep);
       option.series[0].data = realData.slice(step,endStep);
       option.series[1].data = symbolData.slice(step,endStep);
     },
     isRefresh: labelData.length>length });

坐标系的优化

在作bar或则line，或则基于这二者的扩展系列时，除了上面提到的，其实设置或数值（value）轴的刻度，也是一件须要注意的事情。好比下面两张图片这样，若是单看，感受没啥，但若是在一个大屏里有多个这种柱状或曲线图，有些间隔线三四根，有些八九根，还有些没有均分，这种可视化展现，就会给人一种七零八落的感受，根据我的经验，将间隔线控制在6根如下，体验较好。

除了上面提到的这一种，还有就是坐标轴范围过大，数值过大，形成不美观及可读性差。好比下面这种，简直就是失败的炫富，除去y轴数字重叠的问题，还有就是根本没法一眼知道他总收入究竟在那个段位，只知道不少，须要专心的数，才能知道，哦，，，嗦嘎，572.67亿元，抢了他，马上，立刻，如今就去：

上面分享了两种表达不友好的数据展现图表，那怎么才能更好的优化呢。下面我提供一下本身在作公司一个项目时的思路，关于具体实现能够本身摸索,但若是大家家的后端都为你计算好了单位，处理了前两步，那你就只须要作最后一步了。关于为何不直接设置yaxis的min，max，spiktLine来控制间隔线及间隔，Echarts官方文档有这样的回答：坐标轴的分割段数，须要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度做调整，关于操做interval来控制间隔，也有这样一句提示：由于 splitNumber 是预估的值，实际根据策略计算出来的刻度可能没法达到想要的效果，这时候可使用 interval 配合 min、max 强制设定刻度划分，通常不建议使用：

地图的应用

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

不一样版本的js或则json地图数据，呈现出来的效果差异很大，大到测试给你提bug的地步，好比下面两幅图所示，左边图的甘孜州名称已经把本身的爪牙彻底伸到雅安去了，而绵阳则像已经吞并了德阳,本身对比了一下数据，左图的地图json数据是压缩过的，右图是未压缩的，但讲道理的话，应该是这两个json不是同一个版本：

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

自定义系列

当时学了Echarts不久，看到Gallery上面一些炫酷的实例，本身也是想动手作了一个，可一看Echarts源码，一脸懵逼，后面又看了一下zRender及羡辙老师的水球图，感受入了点门，但离作出炫酷效果仍是有些差距。直到最近发现4.0版本介绍了自定义系列,捣鼓半天，本身作了个伪3d填充，2d坐标系的柱状图效果（加载动画化花了点时间），感兴趣的能够本身去研究一下：

打个总结

感受这个经验分享帖，写的愈来愈像Echarts宣传贴了。掐指一算，本身作数据可视化已经快一年了，但感受就像入了个门，做为前端的一个分支，水同样深。若是你对可视化尚未概念，推荐看一下蚂蚁金服去年推出的G2，其做者也是前Echarts的做者，里面讲了更多可视化图表理论性的东西，G2可视化基础文档。为了有一个直观的表现，本身用Vue搭了一个可视化Demo,感兴趣的能够留下你的邮箱。
本文首发于：http://closertb.site ，转载请注明

https://image-static.segmentf...