页面body的zoom缩放影响echarts的鼠标位置及弹窗位置

本文介绍了如何在Echarts组件的mounted生命周期钩子中,通过修改document.body.style.zoom值并应用相应的CSS规则,解决缩放导致的canvas定位异常问题。
摘要由CSDN通过智能技术生成

在echarts组件中

mounted(){
    console.log(document.body)
    console.log(document.body.style.zoom) 
    let bili=document.body.style.zoom
    // 处理缩放导致canvas定位异常
    document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {zoom: ' + 1 / bili + '}');
    document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {transform: scale(' + bili + ')}');
    document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {transform-origin: 0 0}');
}

  • 13
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用Echarts实现鼠标移动划线的方法: 1. 首先需要在HTML文件中引入Echarts的JS文件和CSS文件。 2. 在HTML文件中创建一个div元素,用于显示Echarts图表。 3. 在JS文件中定义一个变量来存储Echarts实例,并使用echarts.init()方法初始化。 4. 定义一个变量来存储划线的起点和终点坐标。 5. 使用Echarts的option配置项来配置图表,包括x轴、y轴、网格线等。 6. 在鼠标按下事件中获取起点坐标,并在鼠标移动事件中获取终点坐标,并将起点和终点坐标存储到之前定义的变量中。 7. 在鼠标开事件中,使用Echarts的addMarkLine()方法来添加一条划线,划线的起点和终点坐标即为之前存储的坐标。 8. 最后使用Echarts的setOption()方法来更新图表。 以下是示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Echarts Demo</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script> <style> #chart { width: 600px; height: 400px; } </style> </head> <body> <div id="chart"></div> <script> var chart = echarts.init(document.getElementById('chart')); var startPoint = null; var endPoint = null; chart.setOption({ xAxis: { type: 'value', splitLine: { show: true } }, yAxis: { type: 'value', splitLine: { show: true } }, series: [{ type: 'line', markLine: { silent: true, data: [] } }] }); chart.on('mousedown', function (params) { startPoint = { x: params.event.offsetX, y: params.event.offsetY }; }); chart.on('mousemove', function (params) { if (startPoint) { endPoint = { x: params.event.offsetX, y: params.event.offsetY }; } }); chart.on('mouseup', function (params) { if (startPoint && endPoint) { chart.setOption({ series: [{ markLine: { data: [{ coord: [startPoint.x, startPoint.y] }, { coord: [endPoint.x, endPoint.y] }] } }] }); startPoint = null; endPoint = null; } }); </script> </body> </html> ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值