六、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提示框组件配置项大全 的相关文章

  • 如何在高图表中包装图例项目?

    我在使用 highcharts 时遇到了一个大问题 因为我已经尝试了几个小时来包装图例项目 如果它们很长 我尝试设置图例和图例项宽度 但我的文本仍然从图例中出来 我唯一发现的就是改变highcharts src js但我认为这不是解决这个问
  • 在鼠标悬停在画布上的形状/位置(坐标)上时显示工具提示

    当鼠标悬停在画布上的某些位置时 我试图显示相应的工具提示 例如 当鼠标在画布上的坐标为 100 100 时 显示tooltip1 当鼠标位置在 200 200 时 显示tooltip2等 我已经添加了事件侦听器来检测鼠标移动并获取鼠标位置
  • 第二次“显示”后引导工具提示消失

    我想根据一些用户输入生成手动工具提示 最简单的方法是隐藏所有工具提示 然后显示相关的工具提示 我已将代码减少到最基本的部分 并且我的工具提示在第二次 显示 后不断消失 我正在使用 bootstrap 3 3 4 和 jquery 2 1 3
  • 如果在已经为 true 的情况下出现新错误,则 Validation.HasError 不会再次触发

    我使用 MVVM 和我的对象实现 IDataErrorInfo 设置属性后 我运行自定义验证方法 如果验证通过 我将返回 String empty 这会将 Validation HasError 设置为 false 如果验证失败 则 Val
  • 将工具提示保留在浏览器窗口内? (不使用插件)

    我的工具提示代码如下 HTML CSS a tooltip span display none padding 5px border 1px solid 000 background 999 position absolute color
  • 工具提示内的图像tiptip

    我需要在具有悬停效果的工具提示中插入图像 tel view tipTip defaultPosition top delay 400 fadeIn 400 keepAlive true activation click HTML img s
  • WPF:路径填充上的工具提示

    我想将工具提示分配给 System Windows Shape Path 虽然当我触摸路径的轮廓时会弹出工具提示 但当我位于路径的填充部分内时 我没有得到任何工具提示 我可以通过某种方式改变这种行为吗 我唯一的想法是将路径添加到画布等附加控
  • WPF自定义控件的ToolTip MultiBinding问题

    当我在 WPF 自定义控件中设置 ToolTip 绑定时 这种方式效果完美 public override void OnApplyTemplate base OnApplyTemplate SetBinding ToolTipProper
  • Bootstrap 工具提示 - 单击另一个工具提示时隐藏

    我希望有人能帮帮忙 我试图在单击另一个工具提示图标时隐藏工具提示 它有效 但是当我决定再次单击最后一个工具提示时 它会 闪烁 工具提示 var Hastooltip hastooltip HasTooltip on click functi
  • 使用 jQuery 隐藏本机工具提示

    当用户将鼠标悬停在具有标题属性的锚标记上时 是否有办法隐藏本机工具提示操作 我不想删除它 只是不显示默认工具提示操作的令人讨厌的黄色框 UPDATE 在阅读了其他几篇文章后 我认为我无法隐藏本机工具提示操作的标题属性 但我试图跳出框框思考
  • 如何向非超链接 HTML 标记添加工具提示

    是否有办法向非超链接添加工具提示 IE 我希望当鼠标滑过文本时将鼠标悬停在工具提示上 我希望有一个不基于超链接的工具提示的工作示例 Thanks 如果您所说的工具提示是指title属性 您可以将其应用于许多不同的 HTML 元素 例如spa
  • WordPress 网站中的 jQuery UI 工具提示

    尝试让工具提示使用图片而不是文本 到目前为止 它适用于我网站中的文本 a href title hello world ALOHA a 这工作正常 它在链接悬停时显示 hello world 但如果我尝试以下操作 工作 jsfiddle 示
  • Google Chart Gannt 避免工具提示

    通过研究 我发现 Gannt Google Chart 上显示的工具提示不可自定义 因此我决定覆盖它 捕获由我的 gannt 矩形触发的悬停事件 如下所示 google visualization events addListener ch
  • 如何在Java中通过脚本弹出文本框(或工具提示)

    我有一个非常具体的问题 我希望能够通过方法调用 在方法调用的一定时间内在屏幕上的给定位置弹出带有文本的工具提示 可以说任何内容 假设逻辑在 talk 方法中 并且淡去 我该怎么办呢 有没有办法通过 JTooltip 来做到这一点 或者我必须
  • 自定义 highcharts 工具提示以显示日期时间

    我正在开发一个项目 预计会显示此图 http jsfiddle net Kc23N http jsfiddle net Kc23N 当我单击一个点 工具提示 时 我想显示一个可以理解的日期 而不是以毫秒为单位的值 我认为需要更改这段代码 t
  • Highcharts 使用格式化程序更改工具提示日期时间

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

    我发现我可以使用 setData 更改系列 并且我知道我可以使用 setExtremes 修改最大值 但我无法弄清楚如何从图表对象设置工具提示格式化程序 我如何更新该字段 如果我有一个图表对象 如何更新其工具提示格式化程序属性 以及plot
  • 如何向详细信息视图中的边界字段添加工具提示,但前提是列的颜色已更改

    我有以下代码
  • PCA 图中带有名称的工具提示

    我想用 ggplotly 生成交互式绘图 工具提示应该显示变量的名称 interactive lt ggplotly pca dynamicTicks T tooltip c x y label list pca 是 PCA 的可视化 su
  • setToolTipText 消耗鼠标事件的解决方法?

    这似乎是 SWING 已验证的问题 http forums sun com thread jspa threadID 385730 http forums sun com thread jspa threadID 385730 我目前正在尝

随机推荐

  • 图书管理系统数据库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