ECharts 关系图表开发指南与 Vue3 组件封装

一、核心配置解析

1. 基础关系图配置

const baseOption = {title: { text: '关系图谱' },tooltip: {},animationDurationUpdate: 1500,animationEasingUpdate: 'quinticInOut',series: [{type: 'graph',layout: 'force', // 布局方式：force/circular/...force: {repulsion: 1000,edgeLength: [100, 300]},roam: true,focusNodeAdjacency: true,data: [], // 节点数据links: [], // 边数据categories: [], // 分类数据// 更多配置...}]
}

2. 完整配置项说明

const fullOption = {series: [{// 节点样式symbol: 'circle', // 形状类型symbolSize: (value) => Math.sqrt(value) * 5, // 动态尺寸itemStyle: {borderWidth: 2,borderColor: '#fff'},// 边样式lineStyle: {curveness: 0.3, // 连线曲率type: 'solid', // dashed/solidopacity: 0.8},// 标签配置label: {show: true,position: 'right',formatter: '{b}',fontSize: 12,color: '#666'},// 力导向布局参数force: {initLayout: 'circular', // 初始布局gravity: 0.1,friction: 0.6,layoutAnimation: true},// 高亮状态emphasis: {label: { show: true },itemStyle: { shadowBlur: 10 }},// 关系边文字edgeLabel: {show: true,formatter: params => params.data.relation},// 节点分类categories: [{name: '类别1',itemStyle: { color: '#FF6B6B' }}]}]
}

3. Force 布局参数详解

3.1 关键配置参数

参数	类型	作用	推荐值/用法
repulsion	number/function	节点间斥力强度	800-2000（数值越大越分散）
gravity	number	向心力（0松散，1紧凑）	0.2-0.5
edgeLength	number/array	边参考长度（像素）	100-300 或 [min,max]
friction	number	运动阻尼（0快速，1平滑）	0.6-0.9
initLayout	string/object	初始布局方式	circular（环形）/random（随机）

---

3.2 典型场景参数组合

1. 紧凑布局（组织架构图）

force: { repulsion: 800, gravity: 0.5,edgeLength: 150 
}

2. 分散布局（社交网络）

force: { repulsion: 2000,gravity: 0.1,edgeLength: [200, 400] 
}

3. 动态数据（节点>500）

force: {repulsion: node => Math.min(3000, node.value * 50),layoutAnimation: false  // 关闭动画提升性能
}

---

3.3 常见问题速解

1. 节点重叠
   ➔ 增大 repulsion + 减小 edgeLength
2. 布局震荡
   ➔ 提高 friction(0.8+) + 降低 gravity(0.3-)
3. 边缘溢出
   ➔ 增加 gravity(0.5+) + 容器监听 resize 事件

---

3.4 最佳配置示例

force: {repulsion: 1500,        // 强斥力防重叠gravity: 0.3,           // 中等向心力edgeLength: edge => {   // 动态边距return edge.type === 'main' ? 200 : 100 },friction: 0.7,          // 平滑运动initLayout: 'circular'  // 初始环形布局
}

调试技巧：通过 edgeLength = 容器宽度 / sqrt(节点数) 快速估算初始值

二、事件监听处理

// 初始化图表后绑定事件
const chartInstance = echarts.init(dom)// 节点点击事件
chartInstance.on('click', params => {if (params.dataType === 'node') {console.log('点击节点:', params.data)}
})// 边点击事件
chartInstance.on('click', params => {if (params.dataType === 'edge') {console.log('点击关系:', params.data)}
})// 高亮相邻节点
chartInstance.on('mouseover', { dataType: 'node' 
}, params => {chartInstance.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: params.dataIndex})
})

三、高级样式配置

1. 自定义节点形状

itemStyle: {color: {type: 'radial',x: 0.5,y: 0.5,r: 0.5,colorStops: [{offset: 0, color: '#FF6B6B' }, {offset: 1, color: '#FF8787'}]},shadowColor: 'rgba(0,0,0,0.3)',shadowBlur: 8
}

2. 动态边样式

links: [{source: '节点A',target: '节点B',lineStyle: {color: {type: 'linear',colorStops: [{offset: 0, color: '#4DABF7'}, {offset: 1, color: '#69DB7C'}]}}
}]

四、响应式与性能优化

1. 自适应容器

const resizeHandler = () => chartInstance.resize()
window.addEventListener('resize', resizeHandler)// 组件卸载时
onUnmounted(() => {window.removeEventListener('resize', resizeHandler)chartInstance.dispose()
})

2. 大数据优化

{series: [{progressiveThreshold: 1000,progressive: 200,blurSize: 5,hoverLayerThreshold: 3000}]
}

五、Vue3 组件封装

1. 组件实现（RelationChart.vue）

<template><div ref="chartDom" class="relation-chart"></div>
</template>
<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'const props = defineProps({options: { type: Object, required: true },theme: { type: [String, Object], default: 'light' }
})const emit = defineEmits(['nodeClick', 'edgeClick', 'chartReady'])const chartDom = ref(null)
let chartInstance = null
// 添加resize处理函数
const handleResize = debounce(() => {chartInstance?.resize()
}, 300)// 初始化图表
const initChart = () => {chartInstance = echarts.init(chartDom.value, props.theme)chartInstance.setOption(props.options)// 绑定事件chartInstance.on('click', params => {if (params.dataType === 'node') {emit('nodeClick', {...params.data,nodeType: params.dataType,nodeName: params.name})} else if (params.dataType === 'edge') {emit('edgeClick', params.data)}})// 添加resize监听window.addEventListener('resize', handleResize)emit('chartReady', chartInstance)
}// 响应式更新
watch(() => props.options, (newVal) => {chartInstance.setOption(newVal)
}, { deep: true })// 生命周期
onMounted(initChart)
onUnmounted(() => {// 移除resize监听window.removeEventListener('resize', handleResize)if (chartInstance) {chartInstance.dispose()}
})// 暴露实例
defineExpose({ chartInstance })
</script>
<style scoped>
.relation-chart {width: 100%;height: 600px;
}
</style>

2. 组件使用示例

<template><RelationChart:options="chartOptions"theme="dark"@node-click="handleNodeClick"@chart-ready="handleChartReady"/>
</template>
<script setup>
import { ref } from 'vue'
import RelationChart from './RelationChart.vue'const chartOptions = ref({// 完整的配置项...
})const handleNodeClick = (node) => {console.log('点击节点:', node)
}const handleChartReady = (instance) => {console.log('图表实例:', instance)
}
</script>

3. 点击节点关闭子节点

在父组件中监听节点点击事件：

const handleNodeClick = (node) => {console.log('点击节点:', node)if (node.nodeType === 'node') {const clickedNode = data.find((n) => n.name === node.nodeName)if (clickedNode) {clickedNode.collapsed = !clickedNode.collapsed// 查找所有子节点const childNodeNames = findChildNodes(node.nodeName)// 更新子节点状态data.forEach((n) => {if (childNodeNames.includes(n.name)) {n.hidden = clickedNode.collapsed}})updateChartOptions()}}
}
const updateChartOptions = debounce(() => {const visibleNodes = data.filter((node) => !node.hidden)const visibleLinks = links.filter((link) => {const sourceNode = data.find((n) => n.name === link.source)const targetNode = data.find((n) => n.name === link.target)return !sourceNode?.hidden && !targetNode?.hidden});// 更新图表数据逻辑
}

六、最佳实践技巧

1. 数据格式化：

// 将原始数据转换为ECharts格式
const formatData = (rawData) => {return {nodes: rawData.map(node => ({id: node.id,name: node.label,value: node.weight,category: node.type})),links: rawData.relations.map(rel => ({source: rel.from,target: rel.to,relation: rel.type}))}
}

2. 性能优化：

• 使用Web Worker处理大数据计算
• 开启渐近渲染（progressive rendering）
• 合理设置force布局参数

3. 交互增强：

// 添加右键菜单
chartInstance.getZr().on('contextmenu', params => {const pointInPixel = [params.offsetX, params.offsetY]if (chartInstance.containPixel('grid', pointInPixel)) {showContextMenu(params)}
})

本指南覆盖了关系图的核心使用场景，通过组件封装可实现快速集成。建议根据实际业务需求调整配置参数，并通过ECharts官方文档查阅最新API特性。