使用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();
测试后可以达到预期效果