Vue:mpvue-echarts插件 增加对pc端的操作支持

使用uni-app开发pc web页面 用到了mpvue-echarts插件 在移动端操作一切正常,但在pc浏览器上出现了无法点击拖动的问题,通过阅读源码发现事件是通过canvas传递给echarts的 只有touch操作,于是自己修改。

编辑插件目录中的echarts.vue文件 在methods中添加方法:

initMouse() {
	const { canvasId, chart, disableTouch } = this;
	if (disableTouch || !chart) return;
	var canvas = document.querySelector(`#${canvasId}`);
	canvas.onmousedown = function(e){
		chart._zr.handler.dispatch('mousedown', {
			zrX: e.offsetX,
			zrY: e.offsetY
		});
		chart._zr.handler.dispatch('mousemove', {
			zrX: e.offsetX,
			zrY: e.offsetY
		});
	}
	canvas.onmousemove = function(e){
		chart._zr.handler.dispatch('mousemove', {
			zrX: e.offsetX,
			zrY: e.offsetY
		});
	}
	canvas.onmouseup = function(e){
		chart._zr.handler.dispatch('mouseup', {
			zrX: e.offsetX,
			zrY: e.offsetY
		});
		chart._zr.handler.dispatch('click', {
			zrX: e.offsetX,
			zrY: e.offsetY
		});
	}
},

在init()或mounted()方法中调用:

this.initMouse();

测试后可以达到预期效果

点赞

发表评论

邮箱地址不会被公开。 必填项已用*标注