爆款云主机2核4G限时秒杀,88元/年起!
查看详情

活动

天翼云最新优惠活动,涵盖免费试用,产品折扣等,助您降本增效!
热门活动
  • 618智算钜惠季 爆款云主机2核4G限时秒杀,88元/年起!
  • 免费体验DeepSeek,上天翼云息壤 NEW 新老用户均可免费体验2500万Tokens,限时两周
  • 云上钜惠 HOT 爆款云主机全场特惠,更有万元锦鲤券等你来领!
  • 算力套餐 HOT 让算力触手可及
  • 天翼云脑AOne NEW 连接、保护、办公,All-in-One!
  • 中小企业应用上云专场 产品组合下单即享折上9折起,助力企业快速上云
  • 息壤高校钜惠活动 NEW 天翼云息壤杯高校AI大赛,数款产品享受线上订购超值特惠
  • 天翼云电脑专场 HOT 移动办公新选择,爆款4核8G畅享1年3.5折起,快来抢购!
  • 天翼云奖励推广计划 加入成为云推官,推荐新用户注册下单得现金奖励
免费活动
  • 免费试用中心 HOT 多款云产品免费试用,快来开启云上之旅
  • 天翼云用户体验官 NEW 您的洞察,重塑科技边界

智算服务

打造统一的产品能力,实现算网调度、训练推理、技术架构、资源管理一体化智算服务
智算云(DeepSeek专区)
科研助手
  • 算力商城
  • 应用商城
  • 开发机
  • 并行计算
算力互联调度平台
  • 应用市场
  • 算力市场
  • 算力调度推荐
一站式智算服务平台
  • 模型广场
  • 体验中心
  • 服务接入
智算一体机
  • 智算一体机
大模型
  • DeepSeek-R1-昇腾版(671B)
  • DeepSeek-R1-英伟达版(671B)
  • DeepSeek-V3-昇腾版(671B)
  • DeepSeek-R1-Distill-Llama-70B
  • DeepSeek-R1-Distill-Qwen-32B
  • Qwen2-72B-Instruct
  • StableDiffusion-V2.1
  • TeleChat-12B

应用商城

天翼云精选行业优秀合作伙伴及千余款商品,提供一站式云上应用服务
进入甄选商城进入云市场创新解决方案
办公协同
  • WPS云文档
  • 安全邮箱
  • EMM手机管家
  • 智能商业平台
财务管理
  • 工资条
  • 税务风控云
企业应用
  • 翼信息化运维服务
  • 翼视频云归档解决方案
工业能源
  • 智慧工厂_生产流程管理解决方案
  • 智慧工地
建站工具
  • SSL证书
  • 新域名服务
网络工具
  • 翼云加速
灾备迁移
  • 云管家2.0
  • 翼备份
资源管理
  • 全栈混合云敏捷版(软件)
  • 全栈混合云敏捷版(一体机)
行业应用
  • 翼电子教室
  • 翼智慧显示一体化解决方案

合作伙伴

天翼云携手合作伙伴,共创云上生态,合作共赢
天翼云生态合作中心
  • 天翼云生态合作中心
天翼云渠道合作伙伴
  • 天翼云代理渠道合作伙伴
天翼云服务合作伙伴
  • 天翼云集成商交付能力认证
天翼云应用合作伙伴
  • 天翼云云市场合作伙伴
  • 天翼云甄选商城合作伙伴
天翼云技术合作伙伴
  • 天翼云OpenAPI中心
  • 天翼云EasyCoding平台
天翼云培训认证
  • 天翼云学堂
  • 天翼云市场商学院
天翼云合作计划
  • 云汇计划
天翼云东升计划
  • 适配中心
  • 东升计划
  • 适配互认证

开发者

开发者相关功能入口汇聚
技术社区
  • 专栏文章
  • 互动问答
  • 技术视频
资源与工具
  • OpenAPI中心
开放能力
  • EasyCoding敏捷开发平台
培训与认证
  • 天翼云学堂
  • 天翼云认证
魔乐社区
  • 魔乐社区

支持与服务

为您提供全方位支持与服务,全流程技术保障,助您轻松上云,安全无忧
文档与工具
  • 文档中心
  • 新手上云
  • 自助服务
  • OpenAPI中心
定价
  • 价格计算器
  • 定价策略
基础服务
  • 售前咨询
  • 在线支持
  • 在线支持
  • 工单服务
  • 建议与反馈
  • 用户体验官
  • 服务保障
  • 客户公告
  • 会员中心
增值服务
  • 红心服务
  • 首保服务
  • 客户支持计划
  • 专家技术服务
  • 备案管家

了解天翼云

天翼云秉承央企使命,致力于成为数字经济主力军,投身科技强国伟大事业,为用户提供安全、普惠云服务
品牌介绍
  • 关于天翼云
  • 智算云
  • 天翼云4.0
  • 新闻资讯
  • 天翼云APP
基础设施
  • 全球基础设施
  • 信任中心
最佳实践
  • 精选案例
  • 超级探访
  • 云杂志
  • 分析师和白皮书
  • 天翼云·创新直播间
市场活动
  • 2025智能云生态大会
  • 2024智算云生态大会
  • 2023云生态大会
  • 2022云生态大会
  • 天翼云中国行
天翼云
  • 活动
  • 智算服务
  • 产品
  • 解决方案
  • 应用商城
  • 合作伙伴
  • 开发者
  • 支持与服务
  • 了解天翼云
      • 文档
      • 控制中心
      • 备案
      • 管理中心

      ECharts 提示框组件Tooltip属性大全(包含文本注释)

      首页 知识中心 数据库 文章详情页

      ECharts 提示框组件Tooltip属性大全(包含文本注释)

      2024-04-18 09:42:00 阅读次数:51

      echarts,javascript

       

      tooltip: {                                                      // 提示框组件:可以设置在全局(tooltip),可以设置在坐标系中(grid.tooltip、polar.tooltip、single.tooltip),可以设置在系列中(series.tooltip),可以设置在系列的每个数据项中(series.data.tooltip)
      show: true, // 是否显示提示框组件。包括提示框浮层和 axisPointer。
      trigger: 'item', // 触发类型,'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。 'axis'坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。'none' 什么都不触发
      triggerOn: 'mousemove', // 提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发
      showContent: true, // 是否显示提示框浮层,默认显示。只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为false
      alwaysShowContent: true, // 是否永远显示提示框内容,默认情况下在移出可触发提示框区域后一定时间(见下方hideDelay睡醒)后隐藏,设置为true可以保证一直显示提示框内容
      showDelay: 0, // 浮层显示的延迟,单位为 ms,默认没有延迟,也不建议设置。在triggerOn(提示框触发的条件)为 'mousemove' 时有效
      hideDelay: 100, // 浮层隐藏的延迟,单位为 ms,在alwaysShowContent为true的时候无效
      enterable: false, // 鼠标是否可进入提示框浮层中,默认为false,如需详情内交互,如添加链接,按钮,可设置为true
      renderMode: 'html', // 浮层的渲染模式,默认以'html'即额外的DOM节点展示tooltip;此外还可以设置为'richText'表示以富文本的形式渲染,渲染的结果在图表对应的Canvas中(目前SVG尚未支持富文本),这对于一些没有DOM的环境(如微信小程序)有更好的支持。
      confine: false, // 是否将tooltip框限制在图表的区域内。当图表外层的dom被设置为'overflow:hidden',或者移动端窄屏,导致tooltip超出外界被截断时,此配置比较有用
      appendToBody: false, // (从v4.7.0开始支持)是否将tooltip的DOM节点添加为HTML的<body>的子节点。只有当renderMode为'html'是有意义的
      className: 'echarts-tooltip echarts-tooltip-dark' // (从v5.0.0开始支持)指定 tooltip 的 DOM 节点的 CSS 类。(只在 html 模式下生效)
      transitionDuration: 0.4, // 提示框浮层的移动动画过渡时间,单位是s,设置为0的时候会紧跟着鼠标移动。
      position: ['50%', '50%'], // (这里是相对位置,放置在容器正中间)提示框浮层的位置,默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数,inside鼠标所在图形的内部中心位置,top、left、bottom、right鼠标所在图形上侧,左侧,下侧,右侧,
      formatter: '{b0}: {c0}<br />{b1}: {c1}', // 提示框浮层内容格式器,支持字符串模板和回调函数两种形式,模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等,具体见下图
      backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色
      borderColor: '#333', // 提示框浮层的边框颜色
      borderWidth: 0, // 提示框浮层的边框宽
      padding: [
      5, // 上
      10, // 右
      5, // 下
      10, // 左
      ], // 提示框浮层内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距
      textStyle: { // 提示框浮层的文本样式
      color: '#fff', // 文字的颜色
      fontStyle: 'normal', // 文字字体的风格 可选:'normal'(常规) 'italic'(斜体) 'oblique'(倾斜)
      fontWeight: 'normal', // 文字字体的粗细 可选:'normal'(常规) 'bold'(粗体) 'bolder'(加粗) 'lighter'(细体) 100 | 200 | 300 | 400...(像素)
      fontFamily: 'sans-serif', // 文字的字体系列 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
      fontSize: 14, // 文字的字体大小
      lineHeight: 56, // 行高
      width: 15, // 文本显示宽度
      height: 15, // 文本显示高度
      textBorderColor: '#333', // 文字本身的描边颜色
      textBorderWidth: 2, // 文字本身的描边宽度
      textBorderType: 'solid', // 文字本身的描边类型 可选:'solid'(实线) 'dashed'(虚线) 'dotted' 自v5.0.0开始,也可以是number或者number数组 如:textBorderType: [5, 10],用以指定线条的 dash array,配合textBorderDashOffset可实现更灵活的虚线效果
      textBorderDashOffset: 5, // (从v5.0.0开始支持)用于设置虚线的偏移量,可搭配 textBorderType 指定 dash array 实现灵活的虚线效果
      textShadowColor: 'transparent', // 文字本身的阴影颜色
      textShadowBlur: 0, // 文字本身的阴影长度
      textShadowOffsetX: 0, // 文字本身的阴影X偏移
      textShadowOffsetY: 0, // 文字本身的阴影Y偏移
      overflow: 'none', // 文字超出宽度是否截断或者换行。配置width时有效'truncate'截断,并在末尾显示ellipsis配置的文本,默认为... 'break' 换行'breakAll'换行,跟'break'不同的是,在英语等拉丁文中,'breakAll'还会强制单词内换行
      textShadowBlur: 0, // 文字本身的阴影长度
      ellipsis: '这里是末尾显示的文本', // 在overflow配置为'truncate'的时候,可以通过该属性配置末尾显示的文本
      extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',// 额外附加到浮层的css样式。如左面为浮层添加阴影的示例
      order: 'seriesAsc', // (从v5.0.0开始支持)多系列提示框浮层排列顺序。默认值为 'seriesAsc' 提示框排列顺序可选值:'seriesAsc'根据系列声明, 升序排列。 'seriesDesc'根据系列声明, 降序排列。 'valueAsc'根据数据值, 升序排列。 'valueDesc'根据数据值, 降序排列。
      },
      extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);' , // 额外附加到浮层的css样式。如左面为浮层添加阴影的示例
      order:'seriesAsc', // (从v5.0.0开始支持)多系列提示框浮层排列顺序。默认值为 'seriesAsc'
      // 注意版本支持
      };

      附图:提示框浮层内容格式器 formatter: '{b0}: {c0}<br />{b1}: {c1}' 格式化

      ECharts 提示框组件Tooltip属性大全(包含文本注释)

      版权声明:本文内容来自第三方投稿或授权转载,原文地址:https://blog.51cto.com/u_10040183/6048265,作者:SunShineGGB,版权归原作者所有。本网站转在其作品的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如因作品内容、版权等问题需要同本网站联系,请发邮件至ctyunbbs@chinatelecom.cn沟通。

      上一篇:postgresql报错prepared statement ““S_84““ does not exist

      下一篇:Shell判断字符串是否以某些字符开头

      相关文章

      2025-04-22 09:40:08

      【ETL工具】kettle 程序报错 Javascript error: TypeError: Cannot call method “trim“ of null

      【ETL工具】kettle 程序报错 Javascript error: TypeError: Cannot call method “trim“ of null

      2025-04-22 09:40:08
      java , javascript , org
      2025-04-14 08:45:36

      一段诡异的JavaScript代码,其实考察的是一些JavaScript的基础知识

      一段诡异的JavaScript代码,其实考察的是一些JavaScript的基础知识

      2025-04-14 08:45:36
      html , javascript
      2025-04-07 10:20:39

      从零开始手撸WebGL3D引擎11: PostProcessing框架(里程碑5了)

      从零开始手撸WebGL3D引擎11: PostProcessing框架(里程碑5了)

      2025-04-07 10:20:39
      javascript
      2025-04-01 09:21:49

      数据结构14-栈常见操作3

      数据结构14-栈常见操作3

      2025-04-01 09:21:49
      html , javascript , Stack , 前端
      2025-03-26 09:34:16

      react hooks 实现echarts

      react hooks 实现echarts

      2025-03-26 09:34:16
      echarts , react , 代码 , 实现
      2025-02-25 08:57:25

      silverlight 中javascript 代码与托管代码的互调用 以及一些思考

      silverlight 中javascript 代码与托管代码的互调用 以及一些思考

      2025-02-25 08:57:25
      javascript , param , value , 代码 , 客户端 , 调用
      2025-02-21 08:56:43

      TypeScript 的数据类型有哪些?

      ​typescript 和 javascript几乎一样,拥有相同的数据类型,另外在javascript基础上提供了更加实用的类型供开发使用

      2025-02-21 08:56:43
      javascript , null , typescript , undefined , void , 类型 , 赋值
      2025-02-14 08:18:57

      数据可视化—Echars(爬虫及数据可视化)

      数据可视化—Echars(爬虫及数据可视化)

      2025-02-14 08:18:57
      echarts , Echarts , 可视化 , 图表 , 实例
      2024-12-19 08:41:28

      javascript特效——页面不停闪烁

      javascript特效——页面不停闪烁

      2024-12-19 08:41:28
      javascript , 页面
      2024-11-07 07:49:32

      ECharts快速入门

      ECharts快速入门

      2024-11-07 07:49:32
      echarts , 图形
      查看更多
      推荐标签

      作者介绍

      天翼云小翼
      天翼云用户

      文章

      33561

      阅读量

      5236131

      查看更多

      最新文章

      Patroni的执行流

      2024-09-25 10:14:48

      前端项目实战118-按照某属性相同排序

      2024-07-12 07:07:12

      好客租房54-props深入(children属性)

      2024-07-04 09:17:09

      vue96-v-bind使用自定义属性

      2024-06-21 09:59:18

      前端项目实战93-属性中得值分类

      2024-06-13 08:59:42

      数据结构38-链表insert方法实现

      2024-06-13 08:59:42

      查看更多

      热门文章

      javascript-注释-字符串数据类型的方法

      2023-03-30 10:05:56

      前端项目实战51-属性值分割

      2023-05-10 06:00:35

      浏览器Header和cookie字符串形式转Json

      2023-06-28 09:11:13

      全网最详细的js判断字符串包含某个字符串的多种方法,比如search(),includes(),indexOf(),lastIndexOf()等

      2023-07-18 10:27:44

      记录使用Node.js下载zip文件但由于IDM的干扰不能正常下载的问题

      2023-07-20 06:07:38

      Node.js:Dotenv从`.env` 文件加载环境变量的库

      2023-02-23 07:36:37

      查看更多

      热门标签

      数据库 mysql 字符串 数据结构 MySQL 算法 redis oracle java sql python 数据 索引 SQL 查询
      查看更多

      相关产品

      弹性云主机

      随时自助获取、弹性伸缩的云服务器资源

      天翼云电脑(公众版)

      便捷、安全、高效的云电脑服务

      对象存储

      高品质、低成本的云上存储服务

      云硬盘

      为云上计算资源提供持久性块存储

      查看更多

      随机文章

      javascript 遍历json对象检查是否不存在某些属性/字段

      记录使用Node.js下载zip文件但由于IDM的干扰不能正常下载的问题

      Patroni的执行流

      前端项目实战118-按照某属性相同排序

      javascript-注释-字符串数据类型的方法

      vue的template中el-uplaod属性使用变量的方法

      • 7*24小时售后
      • 无忧退款
      • 免费备案
      • 专家服务
      售前咨询热线
      400-810-9889转1
      关注天翼云
      • 旗舰店
      • 天翼云APP
      • 天翼云微信公众号
      服务与支持
      • 备案中心
      • 售前咨询
      • 智能客服
      • 自助服务
      • 工单管理
      • 客户公告
      • 涉诈举报
      账户管理
      • 管理中心
      • 订单管理
      • 余额管理
      • 发票管理
      • 充值汇款
      • 续费管理
      快速入口
      • 天翼云旗舰店
      • 文档中心
      • 最新活动
      • 免费试用
      • 信任中心
      • 天翼云学堂
      云网生态
      • 甄选商城
      • 渠道合作
      • 云市场合作
      了解天翼云
      • 关于天翼云
      • 天翼云APP
      • 服务案例
      • 新闻资讯
      • 联系我们
      热门产品
      • 云电脑
      • 弹性云主机
      • 云电脑政企版
      • 天翼云手机
      • 云数据库
      • 对象存储
      • 云硬盘
      • Web应用防火墙
      • 服务器安全卫士
      • CDN加速
      热门推荐
      • 云服务备份
      • 边缘安全加速平台
      • 全站加速
      • 安全加速
      • 云服务器
      • 云主机
      • 智能边缘云
      • 应用编排服务
      • 微服务引擎
      • 共享流量包
      更多推荐
      • web应用防火墙
      • 密钥管理
      • 等保咨询
      • 安全专区
      • 应用运维管理
      • 云日志服务
      • 文档数据库服务
      • 云搜索服务
      • 数据湖探索
      • 数据仓库服务
      友情链接
      • 中国电信集团
      • 189邮箱
      • 天翼企业云盘
      • 天翼云盘
      ©2025 天翼云科技有限公司版权所有 增值电信业务经营许可证A2.B1.B2-20090001
      公司地址:北京市东城区青龙胡同甲1号、3号2幢2层205-32室
      • 用户协议
      • 隐私政策
      • 个人信息保护
      • 法律声明
      备案 京公网安备11010802043424号 京ICP备 2021034386号