echarts tooltip在图表范围内显示

 

以下两种解决方式,能够应对大部分出现此类问题项目

tooltip.position: 提示框浮层的位置,默认不设置时位置会跟随鼠标的位置。

可选:string, Array, Function

 

一、解决方法:

 

1、设置x轴固定不动 y轴上下跟随

/*设置x轴左右固定,上下跟随。*/
position: function(point, params, dom, rect, size){return [0,point[1]];
}

 

2、设置Y轴上下固定,x左右跟随

/*设置Y轴上下固定,X左右跟随。*/
position: function(point, params, dom, rect, size){return [point[1],0];
}

 

二、position值的可选类型

Array示例:

  // 绝对位置,相对于容器左侧 10px, 上侧 10 pxposition: [10, 10]// 相对位置,放置在容器正中间position: ['50%', '50%']

 

Function示例

  position: function (point, params, dom, rect, size) {// 固定在顶部return [point[0], '10%'];}
//参数:
point: 鼠标位置,如 [20, 40]。
params: 同 formatter 的参数相同。
dom: tooltip 的 dom 对象。
rect: 只有鼠标在图形上时有效,是一个用x, y, width, height四个属性表达的图形包围盒。
size: 包括 dom 的尺寸和 echarts 容器的当前尺寸,例如:{contentSize: [width, height], viewSize: [width, height]}。//返回值:
可以是一个表示 tooltip 位置的数组,数组值可以是绝对的像素值,也可以是相 百分比。
也可以是一个对象,如:{left: 10, top: 30},或者 {right: '20%', bottom: 40}。

 

Str示例

'inside'
//鼠标所在图形的内部中心位置,只在 trigger 为'item'的时候有效。'top'
//鼠标所在图形上侧,只在 trigger 为'item'的时候有效。'left'
//鼠标所在图形左侧,只在 trigger 为'item'的时候有效。'right'
//鼠标所在图形右侧,只在 trigger 为'item'的时候有效。'bottom'
//鼠标所在图形底侧,只在 trigger 为'item'的时候有效。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247397.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue.js 动态为img的src赋值

在vue中动态给src赋值绑定图片会显示不出来 动态添加src被当做静态资源处理了&#xff0c;没有进行编译 解决方法&#xff1a; 1、用网络地址 把图片放在cdn或自己的服务器上&#xff0c;把网络地址存在imgUrl里&#xff0c;然后直接<img :src"Url"> 2.把图片放…

项目打包部署到Tomcat

一、 使用 npm run build打包完成之后会出现一个dist文件夹&#xff0c;里面有static文件夹和一个index.html文件&#xff0c;一般我们部署在tomcat上面会将文件放在webapps文件夹下 如果不进行任何修改将dist文件夹放进去的话&#xff0c;会出现资源路径错误的问题&#xff…

算法阶段三总结

3月25日-4月4日这段时间里。我把字符串的一些基本操作和算法学了下。主要有串的基本操作&#xff0c;字符串的hash函数&#xff08;Rabin-Karp&#xff0c;ELFhash&#xff09;&#xff0c;还有KMP算法。总体感觉还是不错的。尤其清明这三天没出去&#xff0c;都呆在宿舍了&…

vue.config和editorconfig

我们在做项目的时候&#xff0c;应该给经常用到的文件配置它的别名&#xff0c;这样做&#xff0c;既可以方便引用&#xff0c;也可以防止当文件位置发生改变的时候出现错误。 配置前: import bartar from ../../components/bartar 配置后(不用再关心文件层级关系): import bar…

Java生鲜电商平台-订单配送模块的架构与设计

Java生鲜电商平台-订单配送模块的架构与设计 生鲜电商系统最终的目的还是用户下单支付购买&#xff0c; 所以订单管理系统是电商系统中最为复杂的系统&#xff0c;其作为中枢决定着整个商城的运转&#xff0c; 本文将对于生鲜类电商平台的订单设计做一个完整的分析&#xff0c;…

vue项目,webpack中配置src路径别名及使用

默认会有‘’别名&#xff0c;指向src目录&#xff0c;还可以添加自定义别名等等。 使用方法 使用别名一般就三种情况&#xff1a;在js中用&#xff0c;在css中用&#xff0c;在html文档内用 js中用&#xff0c;最简单: import {getName} from /util/namecss中使用&#xff0…

fastclick库的介绍和使用

移动端点击延迟事件 1. 移动端浏览器在派发点击事件的时候&#xff0c;通常会出现300ms左右的延迟 2. 原因: 移动端的双击会缩放导致click判断延迟 fastclick 是具有消除移动端浏览器上的点击事件的 300ms 的延迟的作用。 注意几点 1、PC端无效 2、Android 上的 Chrome …

toString()和String.valueOf()的区别(转)

惯例广告一发&#xff0c;对于初学真&#xff0c;真的很有用www.java1234.com&#xff0c;去试试吧&#xff01; 有的朋友在用这两个的时候感觉差不多 其实&#xff0c;很多时候效果是差不多的 但是&#xff0c;有的时候用.toString()会报错&#xff0c;而用String.valueOf()就…

kylin框架中使用postcss-px2rem

1.kylin框架的使用不做介绍 2.页面中 html模板页面中已经使用clientWidth/375*100px,已经赋值了html的fontsize随页面宽度而变化。 比如宽度375的屏 html的fontsize为100px kylin加载postcss-px2rem cnpm i --save-dev postcss-px2rem 在根目录下的plugin.js中 var px2rem…

VS2005无法启动解决方法(转)

一直有一个问题困扰&#xff0c;VS2005用得好好滴&#xff0c;突然有一天开始就进不去了&#xff0c;启动了以后&#xff0c;没有任何界面的出现&#xff0c;但是打开任务管理器&#xff0c;却能够看到进程的存在&#xff0c;真是奇怪了&#xff0c;我试图卸载并且重新安装&…

kylinH5框架之项目组件理解

目录 组件介绍 组件声明结构 组件接口 script dependency template style 状态注入 接口声明 组件介绍 Component 扩充自 Vue 的组件, 提供了 Vue 组件对等的输入参数能力。在代码书写时提供类 class 的装饰器 Decorator 风格。 import { Component, Watch } from al…

Markdown 语法简介

这是标题一 标题二 标题三 print(hello) 这是一个python 第一点 thiw dhaishd 第二点 转载于:https://www.cnblogs.com/BlogOfEr/p/11229682.html

kylinH5框架之项目开发调试

进行开发调试&#xff0c;需要完成以下步骤&#xff1a; 安装依赖开发调试构建生产 点击 代码示例&#xff0c;获取 Kylin Demo&#xff0c;并完成以下操作。 安装依赖 进入项目根目录&#xff0c;使用 cnpm 安装 npm 依赖&#xff1a; # 安装npm依赖 cnpm install 开发调试…

Java生鲜电商平台-深入订单拆单架构与实战

Java生鲜电商平台-深入订单拆单架构与实战 Java生鲜电商中在做拆单的需求&#xff0c;细思极恐&#xff0c;思考越深入&#xff0c;就会发现里面涉及的东西越来越多&#xff0c;要想做好订单拆单的功能&#xff0c;还是相当有难度&#xff0c; 因此总结了一下拆单功能细节&…

python3中Requests将verify设置为False后,取消警告的方式

import requests resp requests.get(https://www.***.com, verifyFalse)调用成功但是会有如下警告信息&#xff1a; InsecureRequestWarning: Unverified HTTPS request is being made. Adding certificate verification is strongly advised. See: https://urllib3.readthedo…

kylinH5框架之项目脚手架

页面介绍 Page 是一个 Webview 的逻辑抽象层&#xff0c;同时也是组件挂载的根节点。 代码引入 import { Page } from ali/kylin-framework; 页面声明结构 一个Page包含的接口在页面接口中声明&#xff0c;提供了对 Vue 实例的完整控制能力&#xff0c;简易的 Page 使用如…

博弈论学习笔记

决定近段时间复习一下博弈论顺便写点笔记。 大佬博客&#xff1a;几种常见博弈模型https://blog.csdn.net/wr132/article/details/51213331 SG函数与SG定理https://www.cnblogs.com/ECJTUACM-873284962/p/6921829.html 无敌的博弈总结https://blog.csdn.net/acm_cxlove/article…

Promise链式调用和解决回调地狱的ES7终极解决方法async,await

promise链式调用 **then 是成功回调&#xff0c;只要在then后边return一个promise就可以继续then**<script type"text/javascript">let p1new Promise(function(resolve,reject){setTimeout(function(){resolve()//成功回调// reject()//失败回调},2000)//2秒…

1.MySQL目录结构

分为两个目录&#xff1a; 1.安装目录&#xff1a; 2.数据目录&#xff1a; 在Linux下 yum安装mysql后使用 find / -name my.cnf 找到mysql数据文件的位置 转载于:https://www.cnblogs.com/sdrbg/p/11237231.html

对promise.all底层的实现的研究

1.Promise.all(iterable)返回一个新的Promise实例,此实例在iterable参数内素有的Promise都fulfilled或者参数中不包含Promise时&#xff0c;状态变成fulfilled。 如果参数中Promise有一个失败rejected &#xff0c;此实例回调失败&#xff0c;失败原因的是第一个失败Promise的返…