echarts---tooltip（提示框组件）配置项_echarts tooltip设置

**

tooltip //提示框组件。

出现位置

**

• 可以设置在全局，即 tooltip
• 可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip
• 可以设置在系列中，即 series.tooltip
• 可以设置在系列的每个数据项中，即 series.data.tooltip

示例

下面是一个示例，只列举部分属性 最下方有其余配置项简介

tooltip: {
    show: true,    // 是否显示提示框组件
    trigger: 'axis',    // 触发类型（'item'，数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用；'axis'，坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用；'none'，不触发。）
    axisPointer: {
        type: 'line',    // 指示器类型（'line' 直线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。）
        snap: false,    // 坐标轴指示器是否自动吸附到点上。默认自动判断。
        label: {
            margin: 10,    // label 距离轴的距离
            color: '#FFF',     // 文字的颜色
            fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） 
            fontWeight: 'normal',    // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
            fontSize: '20',    // 文字字体大小
            lineHeight: '50',    // 行高 
            padding = [5, 7, 5, 7],    // 内边距，单位px 
            backgroundColor = 'auto',    // 文本标签的背景颜色
        }
    }
    showContent: true,     // 是否显示提示框浮层，默认显示
    alwaysShowContent: true,     // 是否永远显示提示框内容，默认情况下在移出可触发提示框区域后一定时间后隐藏
    confine: true,    // 是否将 tooltip 框限制在图表的区域内
    textStyle: {
        color: '#FFF',     // 文字的颜色
        fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） 
        fontWeight: 'normal',    // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
        fontSize: '20',    // 文字字体大小
        lineHeight: '50',    // 行高 
    },
    formatter: function (params) {
        return '2022年数据' + '<br/>'
                            + params[0].marker + params[0].seriesName + '：' + params[0].data + '<br>'
                            + params[1].marker + params[1].seriesName + '：' + params[1].data + '<br>'
                            + params[2].marker + params[2].seriesName + '：' + params[2].data
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

属性简单介绍

以下是tooltip的相关属性和配置项

tooltip:{
    show:true,  // 是否显示提示框组件。（包括提示框浮层和 axisPointer）   boolean值   默认为false 不显示状态
    
    backgroundColor:'rgba(50,50,50,0.7)',//提示框浮层的背景颜色。color
    
    triggerOn :'mousemove|click', //提示框触发的条件  ECharts 3.0 中新加 可选 [mousemove click mousemove|click none]  不在 'mousemove' 或 'click' 时触发，用户可以通过 action.tooltip.showTip 和 action.tooltip.hideTip 来手动触发和隐藏。也可以通过 axisPointer.handle 来触发或隐藏。 
    
    borderColor:'#333',提示框浮层的边框颜色,
    borderWidth:2,//提示框浮层的边框宽。单位px
    padding:2,//提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
    
    confine: true,//是否将 tooltip 框限制在图表的区域内。boolean 图表外层的 dom 被设置为 'overflow: hidden'，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。
    
    textStyle:{  //提示框浮层的文本样式。
    color: '#fff',  //文字的颜色。
    fontStyle: 'normal', //文字字体的风格。
    fontWeight: 'normal',  // 文字字体的粗细 string [ normal  bold bolder lighter]   number  
    //参数太多参考官方文档 不一一列举
    }
    
    enterable:false, //鼠标是否可进入提示框浮层中， boolean 默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
    
    trigger:'axis', //提示框触发类型。trigger设置后默认提示框显示，string  'item'（数据项图形触发）  'axis'（坐标轴触发） 'none'（什么都不触发）
     
    // 绝对位置，相对于容器左侧 10px, 上侧 10 px
    position: [10, 10],  //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置  string Array Function
      // 相对位置，放置在容器正中间  如采用function 可查看官方文档  内有详细的定位参数
    //  position: ['50%', '50%']
    
    formatter:{ //提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
    //相关参数变量过多，建议查看官方文档
    }
    
     
    //tooltip.axisPointer 中诸配置项的优先级低于轴上的 axisPointer 的配置项。（例如 xAxis.axisPointer 或 angleAxis.axisPointer）
    axisPointer:{ //坐标轴指示器。坐标轴触发有效  作用：提示图表中鼠标在各坐标轴当前刻度。  
    show:true,
    type :'line',//指示器类型。 type设置后默认提示框显示 string 直线指示器  'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器  'cross' 十字准星指示器。
    axis :'y',//指示器指向的坐标轴。string 默认自动取类目轴或者时间轴。 可选 'x', 'y', 'radius', 'angle'
    snap:true,//坐标轴指示器是否自动吸附到点上。 boolean默认自动判断。这个功能在数值轴和时间轴上比较有意义，可以自动寻找细小的数值点。
    z:99, //控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。类似z-index
    //文本标签
    label:{  //坐标轴指示器的文本标签。
    show:true  ,//是否显示
    //label属性太多就不展示了 可自己细看官方文档 { show , precision , formatter , margin , color , fontStyle , fontWeight , fontFamily , fontSize , lineHeight , width , height , textBorderColor , textBorderWidth , textBorderType , textBorderDashOffset , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY , overflow , ellipsis , padding , backgroundColor , borderColor , borderWidth , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY }
    },
    //指示器类型
    lineStyle:{  // 指示器类型的样式 axisPointer.type 为 'line' 时有效。
    //同样属性太多就不展示了 color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity
    },
    同样type为  'shadow' 'cross'时，也有对应样式
    // shadowStyle:{
    // //指示器类型的样式 axisPointer.type 为 'shadow' 时有效。
    // }
    // crossStyle:{
    // //指示器类型的样式 axisPointer.type 为 'cross' 时有效。
    // }
    //动画效果
    animation: true , //是否开启动画  boolean 
    animationThreshold :2000,  //是否开启动画的阈值， num 当单个系列显示的图形数量大于这个阈值时会关闭动画。
    animationDuration :1000,//初始动画的时长，num  Function 支持回调函数，
    // animationDuration : function (idx) {
    //     // 越往后的数据时长越大
    //     return idx * 100;
    // }
    animationEasing:'cubicOut',//初始动画的缓动效果 string 
    animationDelay:1000,//初始动画的延迟，number Function支持回调函数
    animationDurationUpdate:1000,//数据更新动画的时长。number Function支持回调函数
    animationEasingUpdate :'exponentialOut' ,//数据更新动画的缓动效果。 string
    animationDelayUpdate:1000,//数据更新动画的延迟，支持回调函数，number Function
     },
     
    showContent:true,//是否显示提示框浮层，默认显示  boolean
     
    alwaysShowContent:true,//是否永远显示提示框内容，该属性为 ECharts 3.0 中新加,默认情况下在移出可触发提示框区域后 一定时间 后隐藏，设置为 true 可以保证一直显示提示框内容。
     
    
    showDelay:500, //浮层显示的延迟，num 单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。
     
    hideDelay:500,//浮层隐藏的延迟，num 单位为 ms，在 alwaysShowContent 为 true 的时候无效。
    
    enterable:false, //鼠标是否可进入提示框浮层中， boolean 默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
    
    renderMode:'html',// 浮层的渲染模式，string 默认以 'html 即额外的 DOM 节点展示 tooltip； 还可以设置为 'richText' 表示以富文本的形式渲染,对于一些没有 DOM 的环境（如微信小程序）有更好的支持。
    
    appendToBody:true,//是否将 tooltip 的 DOM 节点添加为 HTML 的 <body> 的子节点  从 v4.7.0 开始支持 boolean
    
    transitionDuration:0.3,//提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
    
    extraCssText:'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);' , //额外附加到浮层的 css 样式 string,
    
    order://多系列提示框浮层排列顺序。 string 默认值为 'seriesAsc'    可选[seriesAsc seriesDesc valueAsc valueDesc]
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93