数据可视化个人经验总结 Echarts 相关

发布于 2023-09-25 05:38:32 字数 11892 浏览 39 评论 0

数据可视化

最近掘金对图片做了域名保护，造成图片无法加载，还是 Segmentfault 好，实力硬。

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

D3
Echarts
three.js
HighCharts
Charts
G2

色彩的应用

色彩的应用作为数据可视化重要的部分，同样的数据，同样的图表类型，如果不同的人或者不同的公司做出来，有可能呈现的效果会截然不同，这其中的重要区别可能就是色彩的应用。Echarts 不同的图表，都提供了一套默认的主题色，所以尽管我们不设置颜色，其呈现的效果也还是不错的。Echarts 图表中可进行颜色设置的地方很多，包括但不仅限于下图（官方 demo ）所示的内容：

关于上面图提到的每个部分在 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 >' + addSeparator(val[0].data) + '个</span>'
    }
  }
  ...其他设置
}

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

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 使用轮播时的效果图。

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

这里需要提醒两点：

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，源码及效果图:

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 可视化基础文档。

分享到QQ

分享到微博