美文网首页vue
toolTips抖动问题解决 echarts 鼠标放上去显示提示

toolTips抖动问题解决 echarts 鼠标放上去显示提示

作者: small_Sun | 来源:发表于2021-10-29 15:34 被阅读0次

    toolTips抖动问题解决:
    设置

    showDelay: 100, 
    
    tooltip ={                                  //提示框组件
        trigger: 'item',                        //触发类型,'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。 'axis'坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
        triggerOn:"mousemove",                  //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发
        showContent:true,                       //是否显示提示框浮层
        alwaysShowContent:true,                 //是否永远显示提示框内容
        showDelay: 100,                            //浮层显示的延迟,单位为 ms(可解决toolTips抖动问题)
        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,                  //文本样式
    };
    
    

    相关文章

      网友评论

        本文标题:toolTips抖动问题解决 echarts 鼠标放上去显示提示

        本文链接:https://www.haomeiwen.com/subject/uabialtx.html