当前位置： 首页 > article >正文

Echarts：鼠标悬浮防止溢出

article 2024/11/20 0:41:56

一、创建方法

onChartMouseMove(params) {
  var points = myChart.getModel().getSeriesByIndex(0).getData()._itemLayouts;
  var mousePoint = [params.event.event.clientX, params.event.event.clientY];
  var activePoint;
  var minDistance = Infinity;

  // 计算鼠标与所有data point的距离
  points.forEach((point, index) => {
    var distance = Math.sqrt(Math.pow(point[0] - mousePoint[0], 2) + Math.pow(point[1] - mousePoint[1], 2));
    if (distance < minDistance) {
      minDistance = distance;
      activePoint = index;
    }
  });

  // 如果鼠标在某个data point附近（例如30像素以内），则显示tooltip
  if (minDistance < 30) {
    myChart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: activePoint
    });
  }
}

二、使用

myChart.on('mousemove', this.onChartMouseMove);

http://www.kler.cn/a/287381.html

相关文章：

  • 在MATLAB中导入TXT文件的若干方法
  • Qt 的 QThread：多线程编程的基础
  • stm32启动过程解析startup启动文件
  • SpringBoot中Maven的定义及国内源配置教程，实现自动获取Jar包
  • candence : 如何利用EXCEL 绘制复杂、多管脚元件
  • Nginx server_name配置错误导致路由upstream超时问题
  • STM32Cube高效开发教程＜高级篇＞＜FreeRTOS＞(六)-----FreeRTOS的中断管理
  • Javaweb学习之Vue数据绑定（五）
  • C++跳台阶问题（斐波那契数列问题）
  • C语言典型例题59
  • Leetcode Day18 堆
  • 大数据技术之HBase API(3)
  • 数据结构链串的简单代码实现(C语言代码版)
  • chapter11-枚举和注解——（枚举类）——day14
  • DMDSC集群安装
  • 【网络安全】ASP.NET网站中的文件上传RCE
  • SQL 五十周年：何去何从？
  • 极狐GitLab 如何管理 Kubernetes 集群？
  • docker实战基础二(Docker基础命令)
  • 015_GUI_in_Matlab中实现GUI开发
  • 【C++】list的使用和list的模拟实现和迭代器失效问题
  • django外键表查询
  • 随手记：小程序体积超出2M包大小如何优化
  • Superset安装
  • World of Warcraft [CLASSIC][80][Grandel]Sapphire Hive Drone
  • RocketMQ高级特性二-消息重试与流控