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: 光点动画不适用平滑曲线
官方文档链接: https://echarts.apache.org/zh/option.html#series-lines
标签:光点,img,data,image,var,动效,symbolSize,折线图,Ecarts 来源: https://www.cnblogs.com/yathin/p/14041511.html