diff --git a/src/views/Charts/components/MutualFriends.vue b/src/views/Charts/components/MutualFriends.vue index 8355b72a..4d534514 100644 --- a/src/views/Charts/components/MutualFriends.vue +++ b/src/views/Charts/components/MutualFriends.vue @@ -287,7 +287,7 @@ if (!chartRef.value) { return; } - chartInstance = echarts.init(chartRef.value, chartTheme.value, { useDirtyRect: totalFriends.value > 1000 }); + chartInstance = echarts.init(chartRef.value, chartTheme.value, { renderer: 'svg' }); chartInstance.on('click', handleChartNodeClick); if (graphReady.value) { diff --git a/src/views/Charts/composables/useMutualGraphChart.js b/src/views/Charts/composables/useMutualGraphChart.js index 97333dd0..ead80ddc 100644 --- a/src/views/Charts/composables/useMutualGraphChart.js +++ b/src/views/Charts/composables/useMutualGraphChart.js @@ -184,16 +184,23 @@ export function useMutualGraphChart({ cachedUsers, graphPayload }) { function createChartOption(payload, force) { const nodes = payload?.nodes ?? []; const links = payload?.links ?? []; - const resolvedForce = force || computeForceOptions(nodes, links); const labelMap = Object.create(null); nodes.forEach((node) => { if (node?.id) { labelMap[node.id] = node.name || node.id; } }); + + const resolvedForce = { + ...(force || {}), + layoutAnimation: false + }; return { color: COLORS_PALETTE, backgroundColor: 'transparent', + animation: false, + animationDuration: 0, + animationDurationUpdate: 0, tooltip: { trigger: 'item', formatter: (params) => { @@ -231,6 +238,9 @@ export function useMutualGraphChart({ cachedUsers, graphPayload }) { legendHoverLink: false, roam: true, roamTrigger: 'global', + animation: false, + animationDuration: 0, + animationDurationUpdate: 0, data: nodes, links, label: { @@ -249,7 +259,7 @@ export function useMutualGraphChart({ cachedUsers, graphPayload }) { opacity: 0.5 } }, - force, + force: resolvedForce, itemStyle: { borderColor: '#ffffff', borderWidth: 1,