关键代码:

position: function(point, params, dom, rect, size) {//其中point为当前鼠标的位置,size中有两个属性:viewSize和contentSize,分别为外层div和tooltip提示框的大小var x = point[0]; //
            var y = point[1];var viewWidth = size.viewSize[0];var viewHeight = size.viewSize[1];var boxWidth = size.contentSize[0];var boxHeight = size.contentSize[1];var posX = 0; //x坐标位置var posY = 0; //y坐标位置if (x < boxWidth) { //左边放不开posX = 5;} else { //左边放的下posX = x - boxWidth;}if (y < boxHeight) { //上边放不开posY = 5;} else { //上边放得下posY = y - boxHeight;}return [posX, posY];}

完整的结构如下

option = {title: {text: '折线图堆叠'},tooltip: {trigger: 'axis',position: function(point, params, dom, rect, size) {//其中point为当前鼠标的位置,size中有两个属性:viewSize和contentSize,分别为外层div和tooltip提示框的大小var x = point[0]; //
            var y = point[1];var viewWidth = size.viewSize[0];var viewHeight = size.viewSize[1];var boxWidth = size.contentSize[0];var boxHeight = size.contentSize[1];var posX = 0; //x坐标位置var posY = 0; //y坐标位置if (x < boxWidth) { //左边放不开posX = 5;} else { //左边放的下posX = x - boxWidth;}if (y < boxHeight) { //上边放不开posY = 5;} else { //上边放得下posY = y - boxHeight;}return [posX, posY];}},legend: {data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']},yAxis: {type: 'value'},series: [{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]},{name: '联盟广告',type: 'line',stack: '总量',data: [220, 182, 191, 234, 290, 330, 310]},{name: '视频广告',type: 'line',stack: '总量',data: [150, 232, 201, 154, 190, 330, 410]},{name: '直接访问',type: 'line',stack: '总量',data: [320, 332, 301, 334, 390, 330, 320]},{name: '搜索引擎',type: 'line',stack: '总量',data: [820, 932, 901, 934, 1290, 1330, 1320]}]
};

如果这篇文章对您有帮助,您可以打赏我

技术交流QQ群:15129679

转载于:https://www.cnblogs.com/yeminglong/p/9934910.html

echarts中tooltip提示框位置控制相关推荐

  1. echarts 地图tooltip提示框超出浏览器窗口怎么隐藏?

    echarts tooltip提示框超出浏览器窗口怎么隐藏? 在使用echarts做图时,发现tooltip默认会超出浏览器窗口外,刚开始想做边境检测,试着写了一些代码发现太麻烦了,需要上下左右做多次 ...

  2. 在echarts中自定义提示框内容

    1.期望效果 以柱状图为例,在鼠标滑过每个数据标签时,为了更友好地显示数据内容,需要对显示的数据内容作格式化处理,添加自定义内容. 如下图,鼠标滑过每个数据项时, 第1张是默认提示框: 第2张是处理成 ...

  3. EasyUI中ToolTip提示框的简单使用

    场景 效果 属性 名称 类型 描述 默认值 position string 提示框(tooltip)位置.可能的值:'left'.'right'.'top'.'bottom'. bottom cont ...

  4. echarts图表 tooltip提示框,xAxis X轴,formatter自定义

    做项目时根据设计图用echarts来进行展现数据统计 设计图需要实现效果 根据设计图进行实现的代码.代码里也进行处理了双y轴不重叠问题 <template><chart-item : ...

  5. echarts隐藏掉一条曲线,并且tooltip提示框中不显示

    echarts隐藏掉一条曲线,并且tooltip提示框中不显示 两步走: 1.隐藏掉一条曲线 series: [{name: '...',type: 'line',symbolSize: 0, // ...

  6. Echarts数据可视化tooltip提示框,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  7. html input tooltip,BootStrap tooltip提示框使用小结

    提示框 提示框的基本使用方式为: test message data-original-title可以直接写为title,仍然能正常使用,源码中优先查找前者,前者不存在就会查找title 提示框不提供 ...

  8. 04.tooltip提示框插件,linkbutton按钮插件与progressbar进度条插件

    tooltip提示框插件 1 渲染方式 2 属性 3 事件 4 方法 linkbutton按钮插件 21 渲染方式 22 属性 23 方法 progressbar进度条插件 1 渲染方式 2 属性 3 ...

  9. Echart遇到的问题:tooltip提示框大小异常

    Echart遇到的问题:tooltip提示框大小异常 参考文章: (1)Echart遇到的问题:tooltip提示框大小异常 (2)https://www.cnblogs.com/wyhluckdog ...

最新文章

  1. Django3.0 +Python3 连接mysql遇到django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.13 or newer
  2. Windows 到 Linux 之旅: 第 8 部分. 备份与恢复
  3. 苹果发行10亿美元绿色债券 继续支持巴黎协定
  4. modelsim的库仿真流程--1
  5. MySQL主从复制性能优化
  6. 基于Docker的Redis集群简单搭建
  7. 【gradle】mac下 gradle默认本地仓库位置
  8. Virtual Machine Manager 2012 R2利用服务模板部署DC
  9. 简单介绍Linux进程文件路径的获取方法
  10. 绝版、珍藏、经典软件集合!
  11. 实训四 思科交换机端口聚合提供冗余链路
  12. 直播预告| CIKM2021 Best Short Paper 获得者来啦!
  13. 路由器克隆电脑mac地址,破解电脑连接固定网线ip
  14. Notion,程序员最后一款笔记软件
  15. 解救IP被封的服务器
  16. Linux网卡配置文件详解:
  17. Vue中的@blur事件 当元素失去焦点时所触发的事件
  18. Bluetooth技术学习笔记 ——HFP之Call
  19. CRM管理系统软件哪家好?
  20. BigCommerce vs WooCommerce –哪个更好? (比较)

热门文章

  1. 计算机辅助正畸学模型分析,计算机辅助口腔正畸算法研究
  2. 点击文本框内容消失,移开内容自动显示(两种方法)(原创)
  3. 放在请求头目的_YSLOW性能测试前端调优23大规则(三)添加Expires头
  4. java同步三线程打印abc_java多线程打印ABC
  5. java datasource 配置_Spring boot 基于注解方式配置datasource
  6. python语句分号_python 为什么不用分号作终止符?
  7. sp导出法线_SP导出贴图导Redshift渲染效果不同的问题
  8. html5液体效果,HTML5/CSS3/SVG实现的液体掉落(滑落)动画
  9. Eclipse配置Maven环境并创建Maven项目,搭建spring环境
  10. vscode 智能提示失效