【可视化开发】echarts配置项——修改tooltip默认样式

修改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：设置文本样式 - color- fontStyle- fontWeight- fontSize- …

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