echarts的提示框组件tooltip的所有属性

HeavenPeakMan
已于 2022-07-18 00:01:38 修改
阅读量1.4k
点赞数 1
分类专栏：前端echarts 文章标签： javascript echarts
于 2022-07-17 23:31:05 首次发布
本文链接：https://blog.csdn.net/HeavenPeakMan/article/details/125838981
版权
前端echarts 专栏收录该内容
2 篇文章 0 订阅
订阅专栏
echarts的提示框组件tooltip的所有属性

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