Tooltip 鼠标聚焦的时候 然后离开的时候会出现卡顿现象

[lessin123]

问题描述

Tooltip 离开的图表会出现卡顿。。。

重现链接

<script> import { Chart } from "@antv/g2"; import { defineComponent, getCurrentInstance, nextTick, onMounted, reactive, ref, watch, } from "vue"; export default defineComponent({ name: "PieChartBasicInfo", props: { id: { type: String, default: "", }, pieChartData: { type: Array, default: () => [], }, langValue: { type: String, default: "cn", }, }, setup(props, ctx) { /** * state区域 */ const { proxy } = getCurrentInstance(); let chartMap = ref(""); /** * 数据更新图表 */ const setIntervalFn = () => { chartMap.value.changeData(props.pieChartData); chartMap.value.legend("device", { position: "right", // 配置图例显示位置 offsetX: -40, custom: true, // 关键字段，告诉 G2，要使用自定义的图例 items: props.pieChartData.map((obj, index) => { return { name: obj.device, // 对应 itemName value: `${(obj.deviceRate * 100).toFixed(2)}%`, // 对应 itemValue marker: { symbol: "square", // marker 的形状 spacing: 5, style: { fill: chartMap.value.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应 }, }, // marker 配置 }; }), itemWidth: 110, itemValue: { alignRight: true, fill: "#393A44", }, // 配置 itemValue 样式 }); chartMap.value.render(); }; /** * 初始化图表 */ const initData = () => { const chart = new Chart({ container: props.id, autoFit: true, height: 150, padding: [0, 110, 0, 0], }); const e = document.createEvent("Event"); chartMap.value = chart; chart.theme({ styleSheet: { brandColor: "#FF4500", paletteQualitative10: [ "#FF4500", "#1AAF8B", "#406C85", "#F6BD16", "#2FB8FC", "#B40F0F", "#4435FF", "#FF5CA2", "#BBE800", "#FE8A26", ], paletteQualitative20: [ "#FF4500", "#1AAF8B", "#406C85", "#F6BD16", "#2FB8FC", "#B40F0F", "#4435FF", "#FF5CA2", "#BBE800", "#FE8A26", "#946DFF", "#6C3E00", "#6193FF", "#FF988E", "#36BCCB", "#4988", "#FFCF9D", "#CCDC8A", "#8D00A1", "#1CC25E", ], }, }); // tooltip的自定义内容 chart.scale("deviceRate", { formatter: (val) => { val = val * 100 + "%"; return val; }, }); chart.coordinate("theta", { radius: 0.75, innerRadius: 0.6, }); // let betAmountlang = proxy.$t('betAmount') // // 辅助文本 // chart.annotation().text({ // position: ['50%', '50%'], // content: betAmountlang, // style: { // fontSize: 12, // fill: '#393A44', // textAlign: 'center', // }, // }) chart.interval().adjust("stack").position("deviceRate").color("device"); // chart.clear() chart.render(); }; /** * 监听 图表数据 */ watch( () => props.pieChartData, () => setIntervalFn() ); /** * 监听 多语言 */ watch( () => props.langValue, () => setIntervalFn() ); /** * 挂载 初始化图表 */ onMounted(() => nextTick(() => initData())); return { chartMap, id: props.id, }; }, }); </script>

重现步骤

No response

预期行为

No response

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

2024-05-05.15.29.53.mov

补充说明（可选）

当鼠标hover以后发现tooptip 不会立马消失 而是要等待几秒 很难受这个

[lessin123]

相关代码 都是依照api 来的

[lessin123]

<script> import { Chart } from "@antv/g2"; import { defineComponent, getCurrentInstance, nextTick, onMounted, reactive, ref, watch, } from "vue";

export default defineComponent({
name: "PieChartBasicInfo",
props: {
id: {
type: String,
default: "",
},
pieChartData: {
type: Array,
default: () => [],
},
langValue: {
type: String,
default: "cn",
},
},
setup(props, ctx) {
/**
* state区域
*/
const { proxy } = getCurrentInstance();
let chartMap = ref("");

/**
 * 数据更新图表
 */
const setIntervalFn = () => {
  chartMap.value.changeData(props.pieChartData);
  chartMap.value.legend("device", {
    position: "right", // 配置图例显示位置
    offsetX: -40,
    custom: true, // 关键字段，告诉 G2，要使用自定义的图例
    items: props.pieChartData.map((obj, index) => {
      return {
        name: obj.device, // 对应 itemName
        value: `${(obj.deviceRate * 100).toFixed(2)}%`, // 对应 itemValue
        marker: {
          symbol: "square", // marker 的形状
          spacing: 5,
          style: {
            fill: chartMap.value.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应
          },
        }, // marker 配置
      };
    }),
    itemWidth: 110,
    itemValue: {
      alignRight: true,
      fill: "#393A44",
    }, // 配置 itemValue 样式
  });
  chartMap.value.render();
};

/**
 * 初始化图表
 */
const initData = () => {
  const chart = new Chart({
    container: props.id,
    autoFit: true,
    height: 150,
    padding: [0, 110, 0, 0],
  });
  const e = document.createEvent("Event");
  chartMap.value = chart;
  chart.theme({
    styleSheet: {
      brandColor: "#FF4500",
      paletteQualitative10: [
        "#FF4500",
        "#1AAF8B",
        "#406C85",
        "#F6BD16",
        "#2FB8FC",
        "#B40F0F",
        "#4435FF",
        "#FF5CA2",
        "#BBE800",
        "#FE8A26",
      ],
      paletteQualitative20: [
        "#FF4500",
        "#1AAF8B",
        "#406C85",
        "#F6BD16",
        "#2FB8FC",
        "#B40F0F",
        "#4435FF",
        "#FF5CA2",
        "#BBE800",
        "#FE8A26",
        "#946DFF",
        "#6C3E00",
        "#6193FF",
        "#FF988E",
        "#36BCCB",
        "#004988",
        "#FFCF9D",
        "#CCDC8A",
        "#8D00A1",
        "#1CC25E",
      ],
    },
  });
  // tooltip的自定义内容
  chart.scale("deviceRate", {
    formatter: (val) => {
      val = val * 100 + "%";
      return val;
    },
  });
  chart.coordinate("theta", {
    radius: 0.75,
    innerRadius: 0.6,
  });
  // let betAmountlang = proxy.$t('betAmount')
  // // 辅助文本
  // chart.annotation().text({
  //   position: ['50%', '50%'],
  //   content: betAmountlang,
  //   style: {
  //     fontSize: 12,
  //     fill: '#393A44',
  //     textAlign: 'center',
  //   },
  // })
  chart.interval().adjust("stack").position("deviceRate").color("device");
  // chart.clear()
  chart.render();
};
/**
 * 监听 图表数据
 */
watch(
  () => props.pieChartData,
  () => setIntervalFn()
);
/**
 * 监听 多语言
 */
watch(
  () => props.langValue,
  () => setIntervalFn()
);

/**
 * 挂载 初始化图表
 */
onMounted(() => nextTick(() => initData()));

return {
  chartMap,
  id: props.id,
};

},
});
</script>

[lessin123]

甚至用官方demo 也是这样。用的是 vue3.x 的版本

[lessin123]

@pearmini help

[zzj9468]

我也出现了，我是条形图，我版本是"@antv/g2": "^5.1.20", vue3
`
import { Chart } from '@antv/g2'

const data = ref([
{ group: '事业部1', value: 1 },
{ group: '销售小组2', value: 100 },
{ group: '销售小组3', value: 0 }
])

const _chart = new Chart({
container: 'container',
autoFit: true,
marginRight: 60,
marginTop: 60
})

_chart
.interval()
.coordinate({ transform: [{ type: 'transpose' }] })
.data(data.value)
.encode('x', 'group')
.encode('y', 'value')
.encode('size', 20)
.axis(false)
.label({
text: 'group',
textAlign: 'left',
position: 'left',
fill: '#99a9b4',
fontSize: 12,
dy: -20
})
.label({
text: 'value',
fontSize: 12,
textAlign: 'outside',
fill: '#fff',
dx: 10
})
_chart.render()
}

`

[pearmini]

@lessin123 可以看看 5.x 是否有这个问题。

[pearmini]

@zzj9468 我看你给的例子是没有问题呢？只不过 tooltip 移开的时候有一个延迟，这是因为动画的原因，可以把 visibility 动画关闭试试，修改代码如下：

  .interaction('tooltip', {
    css: {
      '.g2-tooltip': {
        transition:
          'left 0.4s cubic-bezier(0.23, 1, 0.32, 1), ' +
          'top 0.4s cubic-bezier(0.23, 1, 0.32, 1)',
      },
    },
  });