【可视化开发】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框限制在图表的区域内，默认为false
	extraCssText:
	   //额外附加到浮层的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样式在可视化开发中十分常见，希望这篇笔记能分享给大家一些经验哦~