Echarts tooltip内容自定义背景透明

Echarts tooltip内容自定义背景透明

引用

CSDN

1.

https://blog.csdn.net/qq_61869009/article/details/141276982

在使用Echarts进行数据可视化开发时，我们常常需要对图表中的tooltip进行自定义配置，以实现更好的交互效果。本文将介绍如何设置tooltip的背景透明度，以及相关的其他配置选项。

以下是具体的配置代码示例：

//提示框
tooltip: {
  axisPointer: {
    type: "line", // 指示器类型（'line' 直线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。）
    snap: false, // 坐标轴指示器是否自动吸附到点上。默认自动判断。
  },
  showContent: true, // 是否显示提示框浮层，默认显示
  // alwaysShowContent: true, // 是否永远显示提示框内容，默认情况下在移出可触发提示框区域后一定时间后隐藏
  triggerOn: "mousemove", // 提示框触发的条件（'mousemove'，鼠标移动时触发；'click'，鼠标点击时触发；'mousemove|click'，同时鼠标移动和点击时触发；'none'，不在 'mousemove' 或 'click' 时触发）
  backgroundColor: "rgba(0, 0,0, 0.5)", // 提示框浮层的背景颜色
  padding: 15, // 提示框浮层内边距，单位px
  position: "left",
  textStyle: {
    color: "#FFFFFF", // 文字的颜色
    fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
    fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
  },
  //axis 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
  trigger: 'axis',
  confine: true,
  //给提示框提示数据加单位
  formatter: (params) => {
  console.log(params);
    var relVal = params[0].name
    for (var i = 0, l = params.length; i < l; i++) {
      relVal += '<br/>' + params[i].seriesName + ' ' + params[i].marker + ' ' + params[i].value
    }
    return relVal
  },
},  

通过上述配置，可以实现一个具有透明背景的tooltip效果。其中，backgroundColor属性使用了rgba颜色值，通过调整alpha值来控制透明度。此外，代码中还包含了其他一些常用的tooltip配置选项，如触发方式、位置、文字样式等，可以根据实际需求进行调整。