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

相关代码 都是依照api 来的

<!-- * @FilePath: /panda-risk-web/src/pages/index/views/user/userPortrait/ty-userPortrait/chart/PieChart.vue * @Description: 图标 -->

<template> <div :id="id"></div> </template> <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>

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

@pearmini help

我也出现了，我是条形图，我版本是"@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() }

`

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

@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)',
      },
    },
  });