New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Tooltip 鼠标聚焦的时候 然后离开的时候会出现卡顿现象 #6215
Comments
相关代码 都是依照api 来的 |
<script>
import { Chart } from "@antv/g2";
import {
defineComponent,
getCurrentInstance,
nextTick,
onMounted,
reactive,
ref,
watch,
} from "vue";
export default defineComponent({
}, |
甚至用官方demo 也是这样。用的是 vue3.x 的版本 |
@pearmini help |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
问题描述
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
平台
屏幕截图或视频(可选)
2024-05-05.15.29.53.mov
补充说明(可选)
当鼠标hover以后发现tooptip 不会立马消失 而是要等待几秒 很难受这个
The text was updated successfully, but these errors were encountered: