uCharts秋云组件在TV端上显示数据过多时自动滚动实现.

        根据业务需求要在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 方法;

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值