【可视化开发】echarts配置项——修改tooltip默认样式-Toy模板网

这篇具有很好参考价值的文章主要介绍了【可视化开发】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;
	},//格式化悬浮框文字格式
},

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

配置项

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