Ecarts折线图光点动效
近期有个需求,在echarts折线图上的折线,添加一个可以随着折线路径跑动的光点。研究了好一会,然后需求取消了!
// 图表数据
var XName = ["第一季度", "第二季度", "第三季度", "第三季度"] // x轴
var YData = [1, 2, 3, 4] // y 轴
/*
* 图片
* 1、网络图片:image:// + 图片链接
* 2、base64 图片:image:// + base64
* 3、path 路径: path:// + 矢量路径
*/
var img = 'image://http://www.yathin.cn/assets/img/20201126113012111.png'
// 光点动画数据, x轴 与 y轴 对应数据的数组
var data = [{
coords: [
['第一季度', 1],
['第二季度', 2],
['第三季度', 3],
['第四季度', 4]
]
}]
// 此处省略 图表其他的配置代码
series: [
// 折线
{
symbolSize: [26,72],
symbol: img,
name: '季度数据',
type: "line",
data: YData,
itemStyle: {
normal: {
borderWidth: 3,
color: '#FFFECD',
}
}
},
// 光点
{
name: '光点',
type: 'lines',
coordinateSystem: 'cartesian2d',
symbolSize: 30,
polyline: true, // 多线段
effect: {
show: true,
trailLength: 0.2, // 尾迹长度
period: 6, // 特效动画的时间, 走完全程的时长
symbolSize: [26,72],
symbol: img
},
lineStyle: {
normal: {
width: 1,
opacity: 0
}
},
data: data
}
]
Tips: 光点动画不适用平滑曲线
官方文档链接: Echarts.