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

[lessin123]

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

[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()
}

`