您的位置:首页 > 其它

Echarts数据可视化tooltip提示框,开发全解+完美注释

2017-08-06 09:03 441 查看
全栈工程师开发手册 (作者:栾鹏)

Echarts数据可视化开发代码注释全解

Echarts数据可视化开发参数配置全解

6大公共组件详解(点击进入):

title详解tooltip详解toolbox详解legend详解dataZoom详解visualMap全解

5大坐标系详解(点击进入):

地理坐标系geo详解grid直角坐标系(xAxis、yAxis)详解parallel平行坐标系详解polar极坐标系详解radar雷达坐标系详解

19种图表类型详解(点击进入,待续):

series-bar柱形图详解series-effectscatter特效散点图series-graph关系图series-heatmap热力图series-line线图series-map地图series-pie饼图series-radar雷达图series-scatter散点图

图表行为和图表事件:

action图表行为event图表事件

Echarts数据可视化tooltip提示框详解:

tooltip ={                                      //提示框组件
trigger: 'item',                            //触发类型,'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。 'axis'坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
triggerOn:"mousemove",                      //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发
showContent:true,                           //是否显示提示框浮层
alwaysShowContent:true,                     //是否永远显示提示框内容
showDelay:0,                                  //浮层显示的延迟,单位为 ms
hideDelay:100,                                //浮层隐藏的延迟,单位为 ms
enterable:false,                             //鼠标是否可进入提示框浮层中
confine:false,                               //是否将 tooltip 框限制在图表的区域内
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:"transparent",            //标题背景色
borderColor:"#ccc",                        //边框颜色
borderWidth:0,                              //边框线宽
padding:5,                                  //图例内边距,单位px  5  [5, 10]  [5,10,5,10]
textStyle:mytextStyle,                     //文本样式
};
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: