echart修改/自定义tooltip样式_echart tooltip自定义

柱状图修改样式

tooltip: {
  trigger: 'axis',
  position: 'left',
  extraCssText:'width:160px !important;height:110px !important;', //自定义的tooltip的大小
  formatter: function(params) {
    var result = params[0].name+'<br>';
    params.forEach(function(item) {
      result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>';
      result +=item.seriesName+" : "+'<span style="color:#fff">'+ item.data+"条</span><br>"
    });
    return result;
  }
},
1
2
3
4
5
6
7
8
9
10
11
12
13

饼图修改样式

tooltip: {
  show:true,
  trigger: 'item',
  position: ['5%', '80%'],
  backgroundColor: 'none',
  textStyle:{
    color: '#000000',
    fontStyle: 'normal',
    fontWeight: 'normal',
    fontFamily: 'sans-serif',
    fontSize: 14,
  },
  formatter: function (p) {
    let returnData = "";
    returnData += '<span style="display:inline-block;border:1px solid;border-radius: 2px;padding:2px 5px 2px 8px;">'+'【'+p.name+'】共'+p.value+'人，<br/>占用户总量的'+p.percent+'%'+'</span>';
    return returnData;
  }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

最后奉上Echart图的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,                     //文本样式
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18