echarts基础学习之组见tooltip笔记（三）

- 日理万妓 2022-05-22 12:09 260阅读 0赞

> 本次学习的是echarts的组件提示框tooltip，在echarts中很多地方都可以用到tooltip提示框，它可以设置在全局中，可设置在系列中，可设置在坐标系中，也可设置在数据项中。
> 
> 下面介绍提示框tooltip它主要的属性，详情可以去官网看[点击打开链接][Link 1]
> 
>  
> 
> <table> 
>  <tbody> 
>   <tr> 
>    <td>trigger</td> 
>    <td style="width:633px;"> <p>&nbsp;触发类型，默认为item数据项触发，值有</p> <p>&nbsp;</p> 
>     <ul> 
>      <li>item&nbsp;&nbsp; &nbsp; 数据项触发，主要用于散点图、饼图等无类目轴图表</li> 
>      <li>axis&nbsp;&nbsp;&nbsp; &nbsp; 坐标轴触发。主要用于柱形图，线形图等类目轴</li> 
>      <li>none&nbsp;&nbsp;&nbsp; &nbsp; 什么都不触发</li> 
>     </ul></td> 
>   </tr> 
>   <tr> 
>    <td>axisPointer</td> 
>    <td style="width:633px;">&nbsp;坐标轴指示器配置，其内还有一只属性配置</td> 
>   </tr> 
>   <tr> 
>    <td>showContent</td> 
>    <td style="width:633px;">&nbsp;是否显示悬浮层，默认true</td> 
>   </tr> 
>   <tr> 
>    <td>alwaysShowContent</td> 
>    <td style="width:633px;">&nbsp;是否永远显示悬浮层，默认false</td> 
>   </tr> 
>   <tr> 
>    <td>triggerOn</td> 
>    <td style="width:633px;"> <p>&nbsp;提示框触发条件，默认mousemove|click。值为</p> <p>&nbsp;</p> 
>     <ul> 
>      <li>mousemove&nbsp; &nbsp; 鼠标移动触发</li> 
>      <li>click&nbsp; &nbsp; &nbsp;鼠标点击时触发</li> 
>      <li>mousemove|click&nbsp;&nbsp;&nbsp; &nbsp; 鼠标移动时和点击时触发</li> 
>      <li>none&nbsp;&nbsp;&nbsp; &nbsp; 什么也不触发</li> 
>     </ul></td> 
>   </tr> 
>   <tr> 
>    <td>showDelay</td> 
>    <td style="width:633px;">&nbsp;提示框显示延迟，单位ms，默认0，在trigger为mousemove时有效</td> 
>   </tr> 
>   <tr> 
>    <td>hideDelay</td> 
>    <td style="width:633px;">&nbsp;提示框隐藏延迟，单位ms，默认100</td> 
>   </tr> 
>   <tr> 
>    <td>enetrable</td> 
>    <td style="width:633px;">&nbsp;鼠标是否能进入悬浮层，默认false。根据需求，如添加链接，按钮可设置true</td> 
>   </tr> 
>   <tr> 
>    <td>confine</td> 
>    <td style="width:633px;">&nbsp;是否将提示框限制在图表的区域内</td> 
>   </tr> 
>   <tr> 
>    <td>transitionDuration</td> 
>    <td style="width:633px;">&nbsp;提示框悬浮层移动过渡动画时间，单位s，默认值0.4</td> 
>   </tr> 
>   <tr> 
>    <td>position</td> 
>    <td style="width:633px;">&nbsp;提示框的定位</td> 
>   </tr> 
>   <tr> 
>    <td>formatter</td> 
>    <td style="width:633px;">&nbsp;提示框的文字的格式器，{a}系列名，{b}数据项名，{c}数据项值，在饼图中{d}百分比，多个系列的话可{a0}，{a1}，{a2}....，还可回调函数function</td> 
>   </tr> 
>   <tr> 
>    <td>backgroudColor</td> 
>    <td style="width:633px;">&nbsp;提示框的背景颜色</td> 
>   </tr> 
>   <tr> 
>    <td>textStyle</td> 
>    <td style="width:633px;">&nbsp;提示框的文本颜色</td> 
>   </tr> 
>   <tr> 
>    <td>extraCssText</td> 
>    <td style="width:633px;">&nbsp;额外附加悬浮层的css样式</td> 
>   </tr> 
>  </tbody> 
> </table>
> 
> 如
> 
>     tooltip:{
>     					show:true,           //是否显示，默认true
>     					trigger:'axis',      //触发类型，坐标轴触发
>     					showContent:true,	 //是否显示提示框悬浮
>     					//坐标轴指示器
>     					axisPointer:{
>     						//指示器类型，十字准心，默认为line直线指示器
>     						type:'cross',
>     						//指示器的坐标轴，自动，默认是类目轴或者时间轴
>     						axis:'x',
>     						//指示器标签
>     						label:{
>     							show:true,
>     							color:'#FFC0CB',
>     						},
>     						//十字准星的样式
>     						crossStyle:{
>     							//线的颜色
>     							color:'pink',
>     							//线的宽度
>     							width:2,
>     							//透明度
>     							opacity:0.8
>     						},
>     					},
>     					//提示框的触发条件，鼠标移动时
>     					triggerOn:'mousemove',
>     					//提示框显示延迟
>     					showDelay:100,
>     					//提示框隐藏延迟
>     					hideDelay:200,
>     					//鼠标是否可进去悬浮层
>     					enterable:true,
>     					//是否将提示框显示在图表的区域内
>     					confine:false,
>     					//提示框悬浮层移动过渡动画的时间，s为单位
>     					transitionDuration:0.5,
>     					//提示框的定位
>     					position:['50%','50%'],
>     					//背景颜色
>     					backgroundColor:'#FFB6C1',
>     					//提示框文本样式
>     					textStyle:{
>     						color:'yellow',
>     						fontSize:18
>     					}
>     				},
> 
>  
> 
> 案例全部代码
> 
>     <!DOCTYPE HTML>
>     <html>
>     	<head>
>     		<meta  charset="utf-8"/>
>     		<title>echarts之组件tooltip</title>
>     		
>     		<script type="text/javascript" src="../js/echarts.js" ></script>
>     	</head>
>     	<body>
>     		<div id="title" style="width: 600px; height: 400px;"></div>
>     		<script type="text/javascript">
>     			//初始化echarts
>     			var myChart = echarts.init(document.getElementById('title'));
>     			//配置
>     			var option = {
>     				title:{
>     					//是否显示，默认true
>     					show:true,
>     					//标题文本
>     					text:'我的主标题',
>     					textStyle:{
>     						//主标题字体颜色
>     						color:'green',
>     						//主标题的字体风格，斜体加粗
>     						fontStyle:'oblique',
>     						//文字大小
>     						fontSize:24,
>     					},
>     					subtext:'我的副标题',
>     					//副标题样式
>     					subtextStyle:{
>     						color:'#FF4500',
>     						fontSize:15
>     					},
>     					//距离容器左边的距离，居中，九宫格布局
>     					left:'center',
>     				},
>     				legend:{
>     					//是否显示，默认true
>     					show:true,
>     					//图例类型，普通类型
>     					type:'plain',
>     					//图例数据与series的name对应
>     					data:[{name:'图例1',icon:'image://../resources/images/smartphone3.png'},{name:'图例2'}],
>     					//离容器左边的距离，左对齐
>     					left:'center',
>     					//离容器顶端的距离，靠底端
>     					top:'bottom',
>     					//图例布局的朝向，水平
>     					orient:'horizontal',
>     					//图例与文本的对齐方式，默认auto
>     					align:'right',
>     					//图例之间的间距
>     					itemGap:10,
>     					//图形的宽高
>     					itemWidth:25,
>     					itemHeight:14,
>     					symbolKeepAspect:true,
>     					//文字格式器，支持函数
>     					formatter:'{name}数据',
>     					//图例选择模式，多选模式
>     					selectMode:'multiple',
>     					//图例关闭时的颜色，默认为#CCC
>     					inactiveColor:'#48D1CC',
>     					//图例选中状态
>     					selected:{
>     						'图例1':true,
>     						'图例2':false
>     					},
>     					//文本样式
>     					textStyle:{
>     						color:'#FFD700',
>     						fontSize:16
>     					},
>     					//提示框，默认不显示
>     					tooltip:{
>     						show:false
>     					},
>     				},
>     				tooltip:{
>     					show:true,           //是否显示，默认true
>     					trigger:'axis',      //触发类型，坐标轴触发
>     					showContent:true,	 //是否显示提示框悬浮
>     					//坐标轴指示器
>     					axisPointer:{
>     						//指示器类型，十字准心，默认为line直线指示器
>     						type:'cross',
>     						//指示器的坐标轴，自动，默认是类目轴或者时间轴
>     						axis:'x',
>     						//指示器标签
>     						label:{
>     							show:true,
>     							color:'#FFC0CB',
>     						},
>     						//十字准星的样式
>     						crossStyle:{
>     							//线的颜色
>     							color:'pink',
>     							//线的宽度
>     							width:2,
>     							//透明度
>     							opacity:0.8
>     						},
>     					},
>     					//提示框的触发条件，鼠标移动时
>     					triggerOn:'mousemove',
>     					//提示框显示延迟
>     					showDelay:100,
>     					//提示框隐藏延迟
>     					hideDelay:200,
>     					//鼠标是否可进去悬浮层
>     					enterable:true,
>     					//是否将提示框显示在图表的区域内
>     					confine:false,
>     					//提示框悬浮层移动过渡动画的时间，s为单位
>     					transitionDuration:0.5,
>     					//提示框的定位
>     					position:['50%','50%'],
>     					//背景颜色
>     					backgroundColor:'#FFB6C1',
>     					//提示框文本样式
>     					textStyle:{
>     						color:'yellow',
>     						fontSize:18
>     					}
>     				},
>     				xAxis:{
>     					type:'category',
>     					data:['小米','魅族','华为','苹果','一加']
>     				},
>     				yAxis:{
>     					name:'销量',
>     					axisLabel:{
>     						formatter:'{value}万'
>     					}
>     				},
>     				series:[
>     					{
>     						name:'图例1',
>     						type:'bar',
>     						data:[15,45,78,56,45]
>     					},
>     					{
>     						name:'图例2',
>     						type:'line',
>     						data:[15,45,78,56,45]
>     					}
>     				]
>     			};
>     			//显示
>     			myChart.setOption(option);
>     		</script>
>     	</body>
>     </html>
> 
> 效果图
> 
> ![70][]

[Link 1]: http://echarts.baidu.com/option.html#tooltip.alwaysShowContent
[70]: /images/20220522/047ccf9c497b4de6b82c8196770a123e.png