根据业务需求要在TV端上对动态的数据进行展示, 存在数据量过的而展示显得拥挤的问题而进行优化为自动横向滚动效果
思路:
1.根据eCharts组件自带的鼠标点击滑动的效果进行调用;
2.判断是否触壁进行移动方向的修改;
3.利用定时器对mouseMove方法进行调用递归调用;
直接从源码下手,找到qiun-data-charts > components > qiun-data-charts > qiu=data-charts.vue文件。追加一个直接的实现的图标滚动方法。如下:
// 数据滚动
tableScroll(e){
if(!e.opts.enableScroll) return
this.timer = setTimeout(() => {
this.moveNum += this.moveDir
this.tableScroll(e);
}, 100)
let addX = -1 * this.moveNum
// console.log("move num", this.moveNum );
this.touchMove({
hasMove: true,
clientX: 0 + addX,
clientY: 182,
changedTouches:[{
x: 0 + addX, y: 67.65625
}],
})
},
触发时机在ucharts组件渲染完成后,即renderComplete生命周期之后,执行上述的方法即可。可直接定位到上述目录文件中的1377(由于源码中有其他地方的改动,所以位置已你们找到为主,认准方法即可)行的 newUChart 方法;