echarts基础学习之组见tooltip笔记（三）
本次学习的是echarts的组件提示框tooltip，在echarts中很多地方都可以用到tooltip提示框，它可以设置在全局中，可设置在系列中，可设置在坐标系中，也可设置在数据项中。
下面介绍提示框tooltip它主要的属性，详情可以去官网看点击打开链接
trigger 触发类型，默认为item数据项触发，值有
- item 数据项触发，主要用于散点图、饼图等无类目轴图表
- axis 坐标轴触发。主要用于柱形图，线形图等类目轴
- none 什么都不触发
axisPointer 坐标轴指示器配置，其内还有一只属性配置 showContent 是否显示悬浮层，默认true alwaysShowContent 是否永远显示悬浮层，默认false triggerOn 提示框触发条件，默认mousemove|click。值为
- mousemove 鼠标移动触发
- click 鼠标点击时触发
- mousemove|click 鼠标移动时和点击时触发
- none 什么也不触发
showDelay 提示框显示延迟，单位ms，默认0，在trigger为mousemove时有效 hideDelay 提示框隐藏延迟，单位ms，默认100 enetrable 鼠标是否能进入悬浮层，默认false。根据需求，如添加链接，按钮可设置true confine 是否将提示框限制在图表的区域内 transitionDuration 提示框悬浮层移动过渡动画时间，单位s，默认值0.4 position 提示框的定位 formatter 提示框的文字的格式器，{a}系列名，{b}数据项名，{c}数据项值，在饼图中{d}百分比，多个系列的话可{a0}，{a1}，{a2}....，还可回调函数function backgroudColor 提示框的背景颜色 textStyle 提示框的文本颜色 extraCssText 额外附加悬浮层的css样式 如
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> <!-- 引入echarts --> <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>效果图
6799
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
