js 可视化大屏-路径-箭头动画之echarts lines 使用第一篇

先上效果图

image

之前在工作中需要给可视化大屏写些动画效果，其中就有上图展示的多段路径效果，写的时候也踩了些坑，避免大家后续工作中遇到相似功能不好下手，这里分享给小伙伴们。

组件使用如下，可以看到，主要就是在背景图上写的动画：

image.png

实现原理：

使用的是echarts的路径图，也是就是type：‘lines’这个系列。可先看下我发布的这个“基础版本”基础-多段线-路径图，考虑到多个页面会使用到当前效果，因此对“基础版本”封装成了一个比较通用的组件，注意echarts版本为4.4.0及其以上。

使echarts 渲染盒子和背景图片(可以是img标签)宽度高度一致，echarts 渲染盒子的层级z-index高于要写动画的图片，以左下角为原点建立坐标系（这样方便测量坐标），整个坐标系宽高（即xAxis和yAxis的最大值）为图片宽高，然后量好各个点的坐标，结合基础-多段线-路径图实现最终动画。

image.png

最后对该组件升级以满足更多需求，如页面缩放时，保证点不错位，如使组件支持多段点分别配置单独的颜色、速度，如下：

路径3.gif

下面进行具体实现，分v1.0和v2.0两个版本，不想看的可直接翻到最后查看最终实现代码

路径组件v1.0版本开发要求

1.核心功能就是上面的基础-多段线-路径图
2.因为是在背景图上（也可以是img标签，只要保证图片和组件宽高一致即可）写一层箭头运动的动画，就要考虑到图片拉伸问题，图片拉伸需要保证动画始终在正确位置上，不会错位。
3.使用组件时要方便，配置点位要简单。

路径组件1.0版本-代码如下：

注意上面两个变量：imgWH和actualWH，imgWH是在测量点坐标时的宽高，actualWH是指页面渲染时的实际宽高，初始时在mounted 中获取。

    mounted () {
      this.actualWH = { // 渲染盒子的大小
        width: this.$el.clientWidth,
        height: this.$el.clientHeight
      }
      this.myChart = this.$echarts.init(document.getElementById(this.id))
    },

在渲染图形前先将点位坐标根据比例换算为实际坐标

image.png

结合下面的option配置，到这里最终实现了不同大小图片在初始时动画能准确的定位

image.png

不知道小伙伴们看懂没，这里总结下这步操作：

首先渲染图表的盒子和背景图（可以是img）大小完全一致，然后配置echarts的option的x轴和y轴分别盒子的宽高，注意x，y轴的类型都为"value"，然后grid配置上下左右都为0，再设置containLabel：false排除坐标轴的影响，这就实现了在图片上建立坐标系的完美对齐。

在测量点位的时候，无论是哪个宽高量的点（量点的时候也是左下角开始） ，比如下面这个点的坐标就是 [305,76],我量的时候是按照背景图1000 * 280（这就是imgWH的值）的大小量的，但页面实际渲染时盒子的大小实际是800 * 188（这就是actualWH获取到的值），直接使用点[305,76]肯定是不行的，因此需要按等比缩放计算出现在的值也就是[800 / 1000 * 305,188 / 280 * 75],这才是现在的实际点位。

image.png

路径4.gif

可以看到代码中配置echarts的option里有scatter这个系列，按理说这部分代码完全是多余的，但是实践测试，必须要有这项配置lines才能跑得起来，而且scatter至少要有一个点。其他代码没什么说的，看代码也能看懂，至此路径图简陋版v1.0开发完毕。

路径组件v2.0版本升级

1.在1.0版本上加上了页面resize事件，页面resize则echarts resize
2.1.0版本配置的颜色、运动速度等是通用的，这里扩展数据配置项，以支持对单条路径的配置，比如：箭头颜色、运行速度等

这里只贴部分关键代码，完整代码请移步页面底部

解决问题1，data中定义timer，然后定义如下方法：

image.png

在页面初始时调用

image.png

离开页面时销毁

image.png

然后优化交互

image.png

至此，问题1解决，到这里按住ctr+鼠标滚轮缩放页面时，可实现适配。

解决问题2：

数据更改，向下兼容，第一项为Object时可配置当前这组点的表现行为

image.png

image.png

核心实现，针对配置项单独生成一个series，这里小伙伴可能有疑问: 不能在一个series的lines中实现吗，为什么要每次单独配置一段路径动画都得push一个lines？答案是：不能，因为effect项只能针对每个lines。

image.png

至此问题二得到解决。

最后，我的项目是vue开发的，封装的vue组件-最终实现2.0版本-代码如下，可直接使用。若是react或者其他方式开发的，可参考代码自行开发。

页面报错

如果有的小伙伴引入报错，看下是不是echarts未引入。注意我代码中是用的this.$echarts，因为我的echarts是全局引入的，如果你要每次都引入可改为let echarts = require("echarts")或者 import * as echarts from 'echarts'; 然后下面的this.$echarts 改为echarts即可。还有echarts版本是否为4.4.0及其以上。

写在最后

总算写完了，这是我的第一篇博客，但不会是最后一篇，如果对你有帮助的话请留个关注，谢谢啦。