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