Antv/G2 自定义树状图tooltip鼠标悬浮提示信息的样式

在 Antv/G2 中，自定义树状图（Tree Chart）的 tooltip 鼠标悬浮提示信息的样式可以通过 CSS 进行控制。首先，你需要给 `Tooltip` 组件创建一个引用，然后在 CSS 文件或组件内部设置样式。这里有一个简单的例子：

import { Tree, Tooltip } from '@antv/g2';

// 创建自定义 tooltip 实例
const tooltip = new Tooltip({
  content: (data) => {
    return `<span>${data.value} - ${data.label}</span>`; // 根据需要替换值和标签
  },
});

// 创建树状图
const tree = new Tree({
  data,
  interactions: [tooltip], // 将 tooltip 添加到交互行为
  ...其他配置...,
});

// 设置 tooltip 样式，例如：
// 可以在外部 CSS 文件中定义全局样式，如：
.tooltip-custom {
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  color: #fff;
  padding: 5px 10px;
}

// 或者在你的组件内定义局部样式：
tooltip.style({
  '.tooltip-content': {
    fontSize: '14px',
    fontWeight: 'bold',
  },
});

在这个例子中，`.tooltip-custom` 类可以根据需求定制背景色、边框、颜色等样式，`.tooltip-content` 则用于调整文本内容的样式。