修改tooltip默认样式

在可视化开发中我们通常会遇到修改tooltip样式问题，下面分享给大家代码片段和最终呈现效果

tooltip: {//鼠标悬浮框的提示文字trigger: "axis",axisPointer: {  // 坐标轴指示器配置项。  type: "none", // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。  axis: "auto", // 指示器的坐标轴。  snap: true, // 坐标轴指示器是否自动吸附到点上},borderColor: "#5cdbd3",//设置自定义边框颜色borderWidth: 1,//设置自定义边框宽度backgroundColor: "rgba(0, 44, 140, 0.50)",//设置自定义背景confine: true,//是否将tooltip框限制在图表的区域内，默认为falseextraCssText:   //额外附加到浮层的css样式，此处为为浮层添加阴影及padding  "box-shadow: 0 0 5px rgba(181, 245, 236, 0.5);padding:5px 15px",formatter: function (param) {  let domName = `<span style="color: #e6f4ff;">${param[0].name}</span>`;  let domValue = `<span style="color: #5cdbd3;">${param[0].value} 个</span>`;  return domName + "<br>" + domValue;},//格式化悬浮框文字格式},

配置项

trigger 触发类型 axis：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。none：什么都不触发 axisPointer 坐标轴指示器配置项 type：指示器类型 line 直线指示器shadow 阴影指示器none 无指示器cross 十字准星指示器 axis： 指示器的坐标轴。snap：对于数值轴、时间轴，如果开启了 snap，则 axisPointer 会自动吸附到最近的点上。 triggerOn:：触发时机 mouseover鼠标移动时触发click鼠标点击时触发mousemove|click 同时鼠标移动和点击时触发。 textStyle：设置文本样式 colorfontStylefontWeightfontSize…

修改tooltip样式在可视化开发中十分常见，希望这篇笔记能分享给大家一些经验哦~