当前位置: 首页>编程语言>正文

echarts 鼠标放上去显示提示框属性详解!

最近做项目用到了echars,对于其提示框我们有了两点需求。
于是我上网找了找关于echarts提示框的相关属性,并在此记录下来以供参考。

这是原创作者的链接,分享给大家:
https://blog.csdn.net/zhen_xin_ai_ni/article/details/84103026

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,                     //文本样式
};

如果你想实现地图鼠标移入或点击有突出效果

series:[
  {
     itemStyle: {
        borderWidth: 0,
        borderColor: "#8fa1e6",
        areaColor: "#b0defa"
     },
     emphasis:{
        areaColor: "#FFF",
        shadowColor: '#215380',
        shadowOffsetY: 5   // 关键在这
     },
     select:{
        areaColor: "#FFF",
        shadowColor: '#215380',
        shadowOffsetY: 5
     }
  }
]

以上就是echarts 鼠标放上去显示提示框属性详解了
我们一起探讨~


https://www.xamrdz.com/lan/5h41993936.html

相关文章: