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

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

 

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'
  // 注意版本支持
};

image.gif

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

image.gif

以上就是ECharts 提示框组件Tooltip属性大全(包含文本注释)的介绍,做此记录,如有帮助,欢迎点赞关注收藏!

目录
相关文章
|
11天前
|
数据可视化 前端开发 定位技术
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
21 0
|
5月前
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
|
5月前
|
前端开发 JavaScript
React中封装echarts图表组件以及自适应窗口变化
React中封装echarts图表组件以及自适应窗口变化
70 1
|
5月前
Echarts tooltip配置项的属性 图表悬浮框
Echarts tooltip配置项的属性 图表悬浮框
|
6月前
|
JSON 小程序 前端开发
小程序Echarts图表组件使用
小程序Echarts图表组件使用
54 0
|
6月前
Echarts自定义tooltip显示内容(隐藏小圆点)
Echarts自定义tooltip显示内容(隐藏小圆点)
103 0
|
6月前
ECharts分段型视觉映射组件的属性修改
ECharts分段型视觉映射组件的属性修改
32 0
|
6月前
echarts 仪表盘三分钟上手及属性修改示例
echarts 仪表盘三分钟上手及属性修改示例
62 0
|
6月前
|
前端开发
【前端统计图】echarts实现属性修改
【前端统计图】echarts实现属性修改
40 0
|
6月前
echarts改变颜色属性的demo
echarts改变颜色属性的demo
25 0