React + ECharts4 实战：手把手教你用树图可视化家谱（含移动端适配技巧）

React + ECharts4 实战：手把手构建高交互家谱树图（含移动端适配方案）

家谱可视化一直是家族文化传承的重要载体。传统纸质家谱查阅不便、更新困难，而数字化的家谱树图不仅能直观展示复杂的家族关系，还能实现动态交互与多端共享。本文将基于React 17 + ECharts4技术栈，从零构建一个支持移动端横屏适配的智能家谱系统。

1. 环境搭建与数据准备

1.1 技术选型与项目初始化

选择React 17 + ECharts4的组合主要基于以下考量：

• ECharts4对React 17的兼容性更稳定
• SVG渲染模式在移动端有更好的显示效果
• 社区资源丰富，遇到问题容易找到解决方案

创建项目并安装依赖：

npx create-react-app family-tree --template typescript cd family-tree npm install echarts@4.9.0 @types/echarts

1.2 数据结构设计

合理的JSON结构是树图可视化的基础。建议采用以下格式：

{ "name": "祖父", "value": 1, // 1表示男性，0表示女性 "birthYear": 1940, "children": [ { "name": "父亲", "value": 1, "spouse": "母亲姓名", "children": [ // 子代数据 ] } ] }

提示：建议使用JSON Schema验证工具确保数据结构一致性，避免后期渲染错误

2. 核心树图实现

2.1 基础树图配置

首先创建核心图表组件FamilyTree.tsx：

import React, { useEffect, useRef } from 'react'; import echarts from 'echarts'; const FamilyTree: React.FC<{ data: any }> = ({ data }) => { const chartRef = useRef<HTMLDivElement>(null); useEffect(() => { if (!chartRef.current) return; const chart = echarts.init(chartRef.current, null, { renderer: 'svg' // 选择SVG渲染器 }); const option = { series: [{ type: 'tree', data: [data], orient: 'vertical', expandAndCollapse: true, initialTreeDepth: 3, label: { position: 'top', fontSize: 12 }, leaves: { label: { position: 'right' } } }] }; chart.setOption(option); return () => chart.dispose(); }, [data]); return <div ref={chartRef} style={{ width: '100%', height: '600px' }} />; };

2.2 高级样式定制

为提升可视化效果，我们需要对以下元素进行深度定制：

性别区分方案：

• 男性节点：蓝色系，圆形图标
• 女性节点：红色系，菱形图标
• 配偶关系：灰色虚线连接

itemStyle: { color: (params: any) => { return params.data.value === 0 ? '#e062ae' : '#5470c6'; } }, symbol: (params: any) => { return params.data.value === 0 ? 'diamond' : 'circle'; }, lineStyle: { color: '#aaa', type: params => { return params.data.spouse ? 'dashed' : 'solid'; } }

3. 移动端适配方案

3.1 响应式布局设计

针对移动端需要特殊处理以下场景：

1. 横屏强制切换

useEffect(() => { const handleResize = () => { if (window.innerHeight > window.innerWidth) { document.documentElement.style.transform = 'rotate(90deg)'; document.documentElement.style.width = '100vh'; document.documentElement.style.height = '100vw'; } }; window.addEventListener('resize', handleResize); handleResize(); return () => window.removeEventListener('resize', handleResize); }, []);

2. 触控交互优化

toolbox: { feature: { restore: {}, saveAsImage: { title: '保存图片', pixelRatio: 2 // 高清导出 } } }, tooltip: { triggerOn: 'click', // 移动端更适合点击触发 formatter: (params: any) => { const data = params.data; return ` <div style="font-weight:bold">${data.name}</div> <div>${data.value === 0 ? '女' : '男'}</div> ${data.birthYear ? `<div>出生: ${data.birthYear}</div>` : ''} `; } }

3.2 性能优化策略

针对大家族的性能问题：

series: [{ progressive: 1000, progressiveThreshold: 2000 }]

4. 高级功能扩展

4.1 动态数据编辑

实现家谱的在线编辑功能：

const [familyData, setFamilyData] = useState(initialData); const handleAddChild = (parentId: string, childData: any) => { const updateData = (node: any): any => { if (node.id === parentId) { return { ...node, children: [...(node.children || []), childData] }; } if (node.children) { return { ...node, children: node.children.map(updateData) }; } return node; }; setFamilyData(updateData(familyData)); };

4.2 多视图联动

实现家族时间轴与树图的联动：

const timelineChart = echarts.init(timelineRef.current); const familyChart = echarts.init(familyRef.current); // 建立图表关联 echarts.connect([timelineChart, familyChart]);

5. 部署与分享方案

5.1 静态资源导出

针对微信等封闭环境的解决方案：

1. 图片导出方案

const exportAsImage = () => { const chart = echarts.getInstanceByDom(chartRef.current!); const dataURL = chart.getDataURL({ type: 'png', pixelRatio: 3, backgroundColor: '#fff' }); const link = document.createElement('a'); link.href = dataURL; link.download = '家谱.png'; link.click(); };

2. PDF生成方案

npm install jspdf html2canvas

import html2canvas from 'html2canvas'; import jsPDF from 'jspdf'; const exportAsPDF = async () => { const canvas = await html2canvas(chartRef.current!); const pdf = new jsPDF('l', 'mm', 'a4'); pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 297, 210); pdf.save('家谱.pdf'); };

在实际项目中，我发现移动端适配最关键的不仅是技术实现，更需要考虑中老年用户的操作习惯。比如添加了双击放大功能、简化了保存流程，这些细节往往比复杂的技术方案更能提升用户体验。