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属性大全（包含文本注释）的介绍，做此记录，如有帮助，欢迎点赞关注收藏！

ECharts 提示框组件Tooltip属性大全（包含文本注释）的更多相关文章

  1. tooltip提示框组件

    Tooltip 提示框组件 可独立于其他组件通过$.fn.tooltip.defaults重写默认的defaults.当用户移动鼠标指针在某个元素上时,出现提示信息窗口来显示额外信息.提示内容可以包含 ...

  2. 第一百九十六节，jQuery EasyUI，Tooltip(提示框)组件

    jQuery EasyUI,Tooltip(提示框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Tooltip(提示框)组件的使用方法, ...

  3. Tooltip(提示框)组件

    一．加载方式 //class加载方式 <a href="http://www.ycku.com" title="这是一个提示信息!" class=&quo ...

  4. 学习EXTJS6（4）基本功能-信息提示框组件

    1.使用组件,主要配置表现形式有二种(是否可以说参数) 用逗号分隔的传统参数列表方式: <script type="text/javascript"> Ext.onRe ...

  5. echarts标准饼图解读(一)——提示框（tooltip）配置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. ASP.NET 使用AJAX让GridView的数据行显示提示框（ToolTip）

    介绍ASP.NET AJAX可以使你的web应用程序具有更丰富的功能和更多的用户响应. 本文中,我将演示如何通过ASP.NET AJAX的帮助,给像GridView这样的数据绑定控件的数据行增加pop ...

  7. jQuery Easy UI Tooptip(提示框)组件

    我们都知道DOM节点的title属性.Tooptip组件就是比較强大的title,它能够自由的设置自己的样式.位置以及有自己相关的触发事件. 演示样例: <!DOCTYPE html> & ...

  8. 一个vue的全局提示框组件

    <template> <!-- 全局提示框 --> <div v-show="visible" class="dialog-tips dia ...

  9. Vue 提示框组件

    OK,首先看看效果: 一.子组件(alert.vue) <template> <transition name="alert"> <div class ...

  10. echarts —— tooltip 鼠标悬浮显示提示框属性

    最近一直在使用echarts,当然也被其中的各种属性整的头大,记录一下其中遇到的问题. tooltip:鼠标悬浮时显示的提示框. 今天想要记录的是[自定义提示框的内容],如下图,鼠标悬浮时提示框内显示 ...

随机推荐

  1. redis五种数据结构详解

    5.相关介绍和命令 5. redis是单线程+多路io复用技术 多路复用是指使用一个线程来检查多个文件描述符的就绪状态,比如调用select和poll函数,传入多个文件毛舒服,如果有一个文件描述符就绪 ...

  2. Swing常用窗体

    Swing常用窗体 Swing 主要具有以下特点: ( 1 )轻量级组件. ( 2 )可插入外观组件. 窗体作为Swing的应用程序中组件的承载体,处于非常重要的地位.Swing中常用的窗体包括JFr ...

  3. @responseBody 返回更多数据

    @responseBody:注解的作用是将controller的方法返回的对象通过适当的转换器转换为指定的格式之后,写入到response对象的body区,通常用来返回JSON数据或者是XML数据,需 ...

  4. 【Java SE】课程目录

    〇.课程简介 一.前言入门 二.数据类型.运算符.方法 三.流程控制 四.Idea.方法 五.数组 六.类.对象.封装.构造 七.Scanner类.Random类.ArrayList类 八.Strin ...

  5. 【Java SE】Day03流程控制语句

    一.流程控制(顺序结构) 二.选择结构 1.多分支中case的穿透性 2.switch的括号可以是 基本/引用类型(String.enum枚举) 三.循环结构 for循环结束后内存消失,效率高 四.扩 ...

  6. 详解 Redis 中 big keys 发现和解决

    在使用 Redis 时,可能会出现请求响应慢.网络卡顿.数据丢失的情况.排查问题的时候,发现是 big keys 的问题. 什么是 big keys 在 Redis 中,一个字符串类型最大可以达到 5 ...

  7. 常用函数/异常处理/for循环本质

    常用内置函数 1,map() - 映射 格式: map(函数,可遍历对象) 指将遍历的元素挨个取出来做函数的行参传参,得到的返回值全部放回map工厂中,map工厂可以被转换成列表查看到 每一个被函数处 ...

  8. Windows搭建Git服务器

    Windows如何搭建Git服务器 1.安装java环境 (1)下载安装java 注意(java的版本需要在1.7及以上) (2)配置java的环境变量 (3)检验java环境是否安装成功 2.下载安 ...

  9. 【转载】EXCEL VBA UBound(arr,1),UBound(arr,2)解释

    Resize(UBound(arr, 1), UBound(arr, 2) 这句什么意思   resize()是一个扩展单元格地址区域的函数,有两个参数,第一个是行扩展数,第二个是列扩展数   UBo ...

  10. 痞子衡嵌入式：Farewell, 我的写博故事2022

    -- 题图:苏州荷塘月色 2022 年的最后一天,写个年终总结.困扰大家三年之久的新冠疫情终于在 12 月全面放开了,痞子衡暂时还没有阳,计划坚持到总决赛.对于 2023 年,痞子衡还是充满期待的,慢 ...