六、Echart图表 之 tooltip提示框组件配置项大全

2023-05-16

🍓 作者主页:💖仙女不下凡💖

🍓 前言介绍:以下👇内容是我个人对于该技术的总结,如有不足与错误敬请指正!

🍓 欢迎点赞👍 收藏⭐ 留言📝 相关账号会持续发布关于文章Echart的相关文章欢迎持续关注!


记录一个最常用的属性,通常用于tooltip内容过多,不能完全显示出来tooltip { appendToBody: true }。解决问题如下图红色圈画的被盖住的情况:
例子

  • axisPointer:坐标轴指示器配置项
  • label:坐标轴指示器的文本标签
  • lineStyleaxisPointer.typeline时有效
  • shadowStyleaxisPointer.typeshadow时有效
  • crossStyleaxisPointer.typecross时有效。
  • textStyle:提示框浮层的文本样式

其中也会含有很多属性,具体使用请参考一下内容

tooltip: {
    show: true,  //是否显示提示框组件
    trigger: 'item',  //触发类型,属性值:item数据项触发/axis坐标轴触发/none不触发
    axisPointer: {
        type: 'line',  //指示器类型,属性值:line直线/shadow阴影/none/cross十字准星
        axis: 'auto',  //指示器坐标轴,属性值:x/y/radius/angle
        snap: true,  //坐标轴指示器是否自动吸附到点上。默认自动判断,布尔值
        z: 0,  //坐标轴指示器z值,控制图形的前后顺序,属性值:number
        label: {
            show: false,  //是否显示文本标签
            precision: 'auto',  //文本标签中数值小数点精度。默认根据当前轴的值自动判断
            formatter: {},  //文本标签文字格式化器
            margin: 3,  //label距离轴的距离
            color: '#fff',  /颜色,文章链接如下  Echart图表之颜色color配置项大全/
            fontStyle: '',  
            fontWeight: '',  
            fontFamily: '',  
            fontSize: 12,  
            lineHeigh: 20,  
            width: 20,  
            height: 100,  
            textBorderColor: '',  //文字本身描边颜色
            textBorderWidth: ,  //文字本身描边宽度
            textBorderType: 'solid',  //文字本身描边类型,属性值:solid/dashed/dotted/number/array
            textBorderDashOffset: 0,  //虚线偏移量,搭配textBorderType指定dashed/array实现虚线效果
            textShadowColor: 'transparent',  //文字本身阴影颜色
            textShadowBlur: 0,  //文字本身的阴影长度
            textShadowOffsetX: 0,  //文字本身的阴影 X 偏移
            textShadowOffsetY: 0,  //文字本身的阴影 Y 偏移
            overflow: 'none',  //文字超出宽度是否截断或换行,配置width时有效,truncate/break/breakAll
            ellipsis: '',  //在overflow配置为'truncate'的时候,可以通过该属性配置末尾显示的文本
            padding: 0,  
            backgroundColor: 'auto',  //背景颜色,默认是和axis.axisLine.lineStyle.color 相同
            borderColor: '',  //文本标签的边框颜色
            borderWidth: 0,  //文本标签的边框宽度
            shadowBlur: 3,  //图形阴影模糊大小,配合shadowColor,shadowOffsetX,shadowOffsetY设置阴影效果
            shadowColor: #aaa,  //阴影颜色,支持的格式同color
            shadowOffsetX: 0,  //阴影水平方向上的偏移距离
            shadowOffsetY: 0  //阴影垂直方向上的偏移距离
        },
        lineStyle: {
            color: #555,  /颜色,文章链接如下  Echart图表之颜色color配置项大全/
            width: 1,  //线宽
            type: solid,  //线的类型,属性值:solid/dashed/dotted/number/array
            dashOffset: 0,  //虚线偏移量,搭配type指定dashed/array实现虚线效果
            cap: 'butt',  //线段末端的绘制,butt方形/round圆形/square也是方形效果与butt不同
            join: 'bevel',  //设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性,bevel默认/round/miter
            miterLimit: 10,  //设置斜接面限制比例,只有当join为miter才有效,属性值:10默认值/number
            shadowBlur: 10,  //阴影模糊大小,该属性配合shadowColor/shadowOffsetX/shadowOffsetY一起设置图形的阴影效果
            shadowColor: '',  //阴影颜色,支持的格式同color
            shadowOffsetX: 0,  //阴影水平方向上的偏移距离
            shadowOffsetY: 0,  //阴影垂直方向上的偏移距离
            opacity: 1  //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形
        },  
        shadowStyle: {
            color: '#fff',  /颜色,文章链接如下  Echart图表之颜色color配置项大全/
            shadowBlur: 10,  
            shadowColor: '',  
            shadowOffsetX: 0,  
            shadowOffsetY: 0,  
            opacity: 1
        },  
        crossStyle: {
            color: '#fff',  /颜色,文章链接如下  Echart图表之颜色color配置项大全/
            shadowBlur: 10,  
            shadowColor: '',  
            shadowOffsetX: 0,  
            shadowOffsetY: 0,  
            opacity: 1
        },  
        animation: true,  //是否开启动画
        animationThreshold: 2000,  //是否开启动画的阈值
        animationDuration: 1000,  //初始动画的时长,支持回调函数
        animationEasing: 'cubicOut',  //初始动画的缓动效果
        animationDelay: 0,  //初始动画的延迟,支持回调函数
        animationDurationUpdate: 200,  //数据更新动画的时长,支持回调函数
        animationEasingUpdate: exponentialOut,  //数据更新动画的缓动效果
    },
    showContent: true,  //是否显示提示框浮层,默认显示
    alwaysShowContent: false,  //是否永远显示提示框内容
    triggerOn: 'mousemove|click',  //提示框触发条件,mousemove/click/mousemove|click/none。none时可通过action.tooltip.showTip和action.tooltip.hideTip来手动触发和隐藏。也可通过axisPointer.handle来触发或隐藏
    showDelay: 0,  //浮层显示的延迟,默认0ms
    hideDelay: 100,  //浮层隐藏的延迟
    enterable: false,  //鼠标是否可进入提示框浮层中,默认为false
    renderMode: 'html',  //浮层的渲染模式,html默认/richText富文本形式
    confine: false,  //是否将 tooltip 框限制在图表的区域内
    appendToBody: false,  //是否将组件DOM节点添加为HTML的<body>子节点。只有当renderMode为html有意义
    className: 'echarts-tooltip echarts-tooltip-dark',  //指定tooltip的DOM节点CSS类,只在html模式下生效
    transitionDuration: 0.4,  //提示框浮层的移动动画过渡时间,单位是s
    position: [],  //提示框浮层的位置
    formatter: ()=>{},  /提示框浮层内容格式器,用这个可以修改提示框默认内容/
    valueFormatter: (value: number | string) => string,  //数值显示部分的格式化回调函数
    backgroundColor: '',  //背景颜色,格式同color
    borderColor: '',  //提示框浮层边框颜色,格式同color
    borderWidth: 0,  //提示框浮层的边框宽
    padding: 5,  
    textStyle: {
        color: '#fff',  /颜色,文章链接如下  Echart图表之颜色color配置项大全/
        fontStyle: '',
        fontWeight: '',
        fontFamily: '',
        fontSize: 14,
        lineHeight : 20,
        width: 220,
        height: 20,
        textBorderColor: '',  //文字本身的描边颜色
        textBorderWidth: '',  //文字本身的描边宽度
        textBorderType: 'solid',  //文字本身描边类型,属性值:solid/dashed/dotted/number/array
        textBorderDashOffset: 0,  //虚线偏移量,可搭配textBorderType指定dashed/array实现灵活的虚线效果
        textShadowColor: 'transparent',  //文字本身阴影颜色
        textShadowBlur: 0,  //文字本身阴影长度
        textShadowOffsetX: 0,  //文字本身阴影 X 偏移
        textShadowOffsetY: 0,  //文字本身阴影 Y 偏移
        overflow: 'none',  //文字超出宽度是否截断或者换行,配置width时有效,属性值:truncate/break/breakAll
        ellipsis: '',  //在overflow配置为'truncate'的时,该属性配置末尾显示文本
        rich: {},  //自定义富文本样式
    },  
    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',  //额外附加到浮层的 css 样式
    order: 'seriesAsc'  //多系列提示框浮层排列顺序,seriesAsc默认/seriesDesc/valueAsc/valueDesc
}

👉推荐相关文章:Echart图表 之 基本使用及配置项

👉推荐相关文章:Echart图表 之 title配置项大全

👉推荐相关文章:Echart图表 之 颜色color配置项大全

👉推荐相关文章:Echart图表 之 X轴(xAxis)与 Y轴(yAxis)配置项大全

👉推荐相关文章:Echart图表 之 legend图例组件配置项大全

👉推荐相关文章:Echart图表 之 toolbox工具栏组件配置项大全

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

六、Echart图表 之 tooltip提示框组件配置项大全 的相关文章

  • 绝对定位元素上的 nowrap 和 max-width 问题

    我猜这两个属性实际上并不一起工作 但我的情况是 我正在尝试创建一个工具提示组件 我的工具提示是绝对定位的 并且由于我不知道内容的长度是多少 所以没有宽度 因此 对于与宽度相关的 css 文本只是形成一个又高又瘦的列 我试过max width
  • 使用引导工具提示进行 Javascript 验证

    当验证返回 false 时 我在启动输入字段的引导工具提示时遇到问题 更多细节 我有想法用 javascript 函数验证我的表单 这工作得很好 但是当验证错误时一定会发生一些事情 我正在考虑引导工具提示 简单 易于控制 现在对我来说是最好
  • 如何在 SVG 元素悬停时显示工具提示 div

    I requirement for an inline SVG chart which has a more information icon which should trigger tooltip on hover See attach
  • 气球弹出 WPF

    我需要显示一个气球弹出窗口 WPF中有针对此类工作的控件吗 像下面这样
  • NVD3 工具提示内容不起作用

    我在我的项目中使用 NVD3 库 并且编写了以下代码 var chart nv models lineChart useInteractiveGuideline true margin top 50 right 50 bottom 50 l
  • WordPress 网站中的 jQuery UI 工具提示

    尝试让工具提示使用图片而不是文本 到目前为止 它适用于我网站中的文本 a href title hello world ALOHA a 这工作正常 它在链接悬停时显示 hello world 但如果我尝试以下操作 工作 jsfiddle 示
  • 工具提示气球显示位置(用于错误通知)

    不久前我问了一个与此密切相关的问题 通知用户错误的替代方法 https stackoverflow com questions 2878043 alternative way to notify the user of an error 简
  • Chart.js 混合图表的工具提示悬停自定义

    我在尝试使用 Chart js 自定义混合图表的悬停工具提示时遇到了一些问题 我有一个条形图显示某种产品的总利润 还有一个折线图显示该某种产品的总量 当我将鼠标悬停在条形图上时 我希望工具提示显示如下内容 Total profit 1399
  • 将关闭按钮(红色 x)添加到 .NET 工具提示

    我正在寻找一种向 NET ToolTip 对象添加关闭按钮的方法 类似于 NotifyIcon 所具有的按钮 我使用工具提示作为消息气球 通过 Show 方法以编程方式调用 这工作正常 但没有 onclick 事件或关闭工具提示的简单方法
  • ggplotly 和 geom_area :将鼠标悬停在区域(而不是点)上时显示信息

    当涉及到绘图时 将鼠标悬停在特定点上时很容易显示信息 这段代码完成了这项工作 toy df data frame t c seq 1 10 seq 1 10 value c runif 10 0 10 2 runif 10 0 10 eve
  • 如何在 React 中使用引导工具提示?

    我之前有工具提示 并且正在尝试将我的组件迁移到 React 我还没有使用react bootstrap 因为我不确定是否会使用 因为它仍在大力开发中 而且还不是1 0 这是我的渲染代码的片段 span span
  • 如何向菜单项添加工具提示?

    我正在尝试为菜单栏项添加工具提示 例如 Save 但我无法获取需求菜单项的实例 我可以添加这个工具提示吗 我正在使用 Tkinter 和 python 2 7 def createMenu self menu Menu root root
  • Highcharts 使用格式化程序更改工具提示日期时间

    我有一个如下图所示的图表 默认情况下 每个工具提示值都位于其自己的工具提示 气泡 中 日期时间位于 Y 轴底部 悬停在 X 标签顶部 问题在于 更改日期时间的格式以匹配区域设置对于 Highcharts 来说不是动态的 我知道我可以让用户更
  • JQuery 工具提示 VS JQuery UI 工具提示 [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 自定义 WPF 工具提示

    我想创建一个 WPF 工具提示 其中包含工具提示标题的标签 然后创建一个包含更详细文本的文本块 我在资源字典中创建了以下样式
  • 工具提示弹出窗口内的 Bootstrap 输入字段已从输出 html 中删除

    您好 我正在使用 bootstrap 4 3 1 并包含 popper 1 14 7 通常我可以在弹出窗口 工具提示的内容中添加输入字段 我从什么时候开始就不知道了 但是当我将输入字段放入内容中时 只有文本可见 当我查看源代码 编译后的 h
  • 单击时显示 Foundation 5 工具提示

    我在跨度上有一个通过基础 5 的工具提示 如下所示 span class has tip tip top title My tool tip i class fi pricetag multiple size 21 i span 这很好用
  • 如何在角度2中动态地在输入框上添加工具提示

    我有一个输入框 我想在将鼠标悬停在输入框上时显示工具提示消息 这将基于我们从服务获得的响应 如果服务响应为 true 则工具提示中的消息将为 true message 如果服务返回 false 则该消息将为 false message 这是
  • 多个链接 dc.js 图表的 d3-tooltips

    我正在寻找修改 dc js 的开箱即用工具提示 似乎有一个解决方案使用d3 js 工具提示 https github com Caged d3 tip as in 这个问题 https stackoverflow com questions
  • 如何用 Java 制作 Windows 7 工具提示

    我一直在网上到处寻找 但没有找到这个小问题的答案 在 Windows 7 中 我认为在 Vista 中 您有一个漂亮的圆形银色工具提示 它看起来比旧的黄色盒装蹩脚工具提示要好得多 下面的 How do I make a Windows 7

随机推荐

  • 图书管理系统数据库SQL设计思路

    1 x1f58d 需求分析 一个图书管理系统包括用户信息维护 图书馆信息 图书信息维护 书籍借出 书籍归还 借书记录 支付查询等 此系统功能用户可以借书 续借 归还 查询书籍 增加 修改和删除 2 x1f58b 需求 1 用户信息维护 xf
  • jQuery夹娃娃小游戏

    点击开始 xff0c 爪子开始往下移夹娃娃首先让我们看一下它的效果图如下 xff1a 页面布局代码如下 xff1a span class token tag span class token tag span class token pun
  • 酒店管理系统数据库SQl设计思路

    第一节 x1f58d 需求分析 一个酒店管理系统包括很多个模块 xff0c 首先我们先要分析一下需求 一 实时房态图 动态生成实时房态图 在房态图上进行房态修改 换房操作 xff0c 续住操作 选择房间进行散客 团队预定 散客 团队入住 散
  • 超经典的20道SQL题目(附加解题思路)

    最近学了SQL的内容 xff0c 老师也给我们发了练习题 xff0c 感觉在做题的过程中得到了提高 xff0c 所以将题目和我自己的答案分享一下 xff0c 希望对大家有所帮助 我使用的是SQL Server 2014 Management
  • 《酒店管理系统》项目总结

    一 项目模块 二 业务流程图 三 业务流程功能实现 1 首先客人接待 xff1a 实时房态图 xff0c 可以直观的显示出所有客房的状态 2 客人预定 xff1a 根据客人的基本资料做预订 xff0c 在房态图上的客房添加一个预定的标识 3
  • Java基础语法

    一 基础语法 Java大小写敏感 比如HelloWorld和Helloworld是不一样的 包名 Package 公司 组织 个人的域名的反向 xff0c 一般是英文字母 英文字母必须是小写 类名 xff08 ClassName xff09
  • Java中的分支语句

    一 前言 本篇文章讲解的知识点是 xff1a 分支语句 xff0c 希望大家能掌握 二 分支语句 提示 xff1a if else 语句可以看作有4种形式 xff1a 1 if 语句 代码 xff1a span class token ke
  • Linux 下ALSA音频工具amixer,aplay,arecord使用

    ALSA音频工具amixer aplay arecord ALSA音频工具编译安装 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61 61
  • Java中的循环语句

    一 前言 本篇文章主要讲解Java知识点是 xff1a 循环语句 希望大家读完这篇文章之后能掌握以下几种循环语句的知识点 二 循环语句 提示 xff1a 循环语句分为以下几种 xff1a 1 for循环 循环场景 xff1a 更适用于明确循
  • Java数组

    对于所有的编程语言来说数组都是相对比较重要的数据结构之一 在Java中数组主要用来存放一组固定大小的相同类型的数据 xff08 一 xff09 数组变量的声明 数组声明有两种写法 xff1a dataType span class toke
  • 运用C在Linux系统中写贪吃蛇小游戏

    最近在学习Linux操作系统的运用 通过写下贪吃蛇这个小游戏 xff0c 加深对c语言的理解以及Linux操作系统的运用 在文章中逐步解析贪吃蛇的整个构建逻辑 并将它记录下来 1 运用ncurses库编写贪吃蛇小游戏 在开始编译贪吃蛇小游戏
  • Vue3入门级别笔记-适用于入门

    前言 xff1a Vue3快速上手 1 Vue3简介 2020年9月18日 xff0c 发布Vue js3 0版本 xff0c 代号 xff1a One Plece xff08 海贼王 xff09 2 Vue3带来了什么 性能升级 打包大小
  • 前端全模块常见面试题与答案详解

    x1f353 作者主页 xff1a x1f496 仙女不下凡 x1f496 x1f353 学习建议 xff1a 以下 x1f447 内容不建议死记硬背 xff0c 而且内容太多也记不住 xff0c 建议了解链接里面的详情解释之后在理解我总结
  • 一、Echart图表 之 基本使用及配置项

    x1f353 作者主页 xff1a x1f496 仙女不下凡 x1f496 x1f353 前言介绍 xff1a 以下 x1f447 内容是我个人对于该技术的总结 xff0c 如有不足与错误敬请指正 xff01 x1f353 欢迎点赞 x1f
  • 三、Echart图表 之 X轴(xAxis)与 Y轴(yAxis)配置项大全

    x1f353 作者主页 xff1a x1f496 仙女不下凡 x1f496 x1f353 前言介绍 xff1a 以下 x1f447 内容是我个人对于该技术的总结 xff0c 如有不足与错误敬请指正 xff01 x1f353 欢迎点赞 x1f
  • 二、Echart图表 之 title配置项大全

    x1f353 作者主页 xff1a x1f496 仙女不下凡 x1f496 x1f353 前言介绍 xff1a 以下 x1f447 内容是我个人对于该技术的总结 xff0c 如有不足与错误敬请指正 xff01 x1f353 欢迎点赞 x1f
  • 四、Echart图表 之 颜色color配置项大全

    x1f353 作者主页 xff1a x1f496 仙女不下凡 x1f496 x1f353 前言介绍 xff1a 以下 x1f447 内容是我个人对于该技术的总结 xff0c 如有不足与错误敬请指正 xff01 x1f353 欢迎点赞 x1f
  • 五、Echart图表 之 legend图例组件配置项大全

    x1f353 作者主页 xff1a x1f496 仙女不下凡 x1f496 x1f353 前言介绍 xff1a 以下 x1f447 内容是我个人对于该技术的总结 xff0c 如有不足与错误敬请指正 xff01 x1f353 欢迎点赞 x1f
  • linux/clearlinux/ubuntu curl 命令详解

    介绍 xff1a cURL是一个利用URL语法在命令行下工作的文件传输工具 xff0c 1997年首次发行 它支持文件上传和下载 xff0c 所以是综合传输工具 xff0c 但按传统 xff0c 习惯称cURL为下载工具 cURL还包含了用
  • 六、Echart图表 之 tooltip提示框组件配置项大全

    x1f353 作者主页 xff1a x1f496 仙女不下凡 x1f496 x1f353 前言介绍 xff1a 以下 x1f447 内容是我个人对于该技术的总结 xff0c 如有不足与错误敬请指正 xff01 x1f353 欢迎点赞 x1f