js可视化⼤屏-路径-箭头动画之echartslines使⽤第⼀篇
先上效果图
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版本-代码如下：
<template>
<div class="chart-box" :id="id"></div>
</template>
<script>
export default {
name: 'linesChartAnimate',
props: {
id: {
type: String,
default: 'ChartBox'
},
imgWH: {
type: Object,
default(){
return {
width: 882, // 当前这张图是 882*602的图
height: 602
}
}
},
},
dotsArr: { // 运动点集合
type: Array,
default(){
return [
[ // 这个括号⾥代表的⼀组数据的运动，即从点[205, 275]运动到点[263, 275]
[205, 275],
[263, 275],
],
[ // 这组点⾥有四个点
[206, 267],
[284, 267],
[284, 413],
[295, 413],
],
]
}
},
speed: { // 转速
type: Number,
default: 7
}
},
data () {
return {
myChart: '',
// 注意：因为图⽚在现实的时候可能会拉伸，所以设置actualWH和imgWH两个变量
actualWH: {
width: 0,
height: 0
}
}
},
mounted () {
this.actualWH = { // 渲染盒⼦的⼤⼩
width: this.$el.clientWidth,
height: this.$el.clientHeight
}
this.draw()
},
methods: {
getLines(){
return {
type: 'lines',
coordinateSystem: 'cartesian2d',
// symbol:'arrow',
zlevel: 1,
symbol: ['none', 'none'],
polyline: true,
silent: true,
effect: {
symbol: 'arrow',
show: true,
period: this.speed, // 箭头指向速度，值越⼩速度越快
trailLength: 0.01, // 特效尾迹长度[0,1]值越⼤，尾迹越长重
symbolSize: 5, // 图标⼤⼩
},
lineStyle: {
width: 1,
normal: {
opacity: 0,
curveness: 0.4, // 曲线的弯曲程度
color: '#3be3ff'
}
}
}
},
getOption () {
// 点合集-在图⽚上⼀个⼀个量的，注意以渲染盒⼦左下⾓为原点，点取值⽅法：以图⽚左下⾓为原点，量⼏个线段点的（x,y）        let dotsArr = this.dotsArr
// 点的处理-量图上距离转换为在渲染盒⼦中的距离 start
// 点的处理-量图上距离转换为在渲染盒⼦中的距离 start
dotsArr.map(item => {
item.map(sub => {
sub[0] = (this.actualWH.width / this.imgWH.width) * sub[0] // x值            sub[1] = (this.actualWH.height / this.imgWH.height) * sub[1] // y值          })
})
// 点的处理-量图上距离转换为在渲染盒⼦中的距离 end
// 散点图和lines绘制 start
let scatterData = []
let linesData = [] // 默认路径图点的路径
let seriesLines = [] // 路径图
dotsArr.map(item => {
scatterData = at(item) // 散点图data
linesData.push({
coords: item
})
})
// 默认路径图
linesData && linesData.length && seriesLines.push({
...Lines(),
data: linesData
})
// 散点图和lines绘制 end
let option = {
网站底部代码js特效
backgroundColor: 'transparent',
xAxis: {
// type: 'category',
type: 'value',
show: false,
min: 0,
max: this.actualWH.width,
axisLine: {
lineStyle: {
color: 'red'
}
},
splitLine: {
lineStyle: {
color: 'red'
}
}
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
show: false,
min: 0,
max: this.actualWH.height,
axisLine: {
lineStyle: {
color: 'red'
}
},
splitLine: {
lineStyle: {
color: 'red'
}
}
// type: 'category'
},
grid: {
left: '0%',
right: '0%',
top: '0%',
bottom: '0%',
containLabel: false
},
series: [
{
zlevel: 2,

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。