用 ECharts graph 画出卡片式矩形节点

关系图谱里把节点画成一张带标题、分隔线、两栏指标的小卡片，是后台可视化里很常见的需求。说起来，ECharts 的 graph 系列默认节点是圆形 symbol要变成“卡片”并没有现成组件。这让很多同学在实现时感到 找不到合适的 API、布局难以控制、样式难以复用。

先厘清一个边界：矩形不是 BadgeGraph 画的

痛点：误以为 BadgeGraph.vue 负责所有节点渲染，结果找不到卡片样式的入口。

BadgeGraph.vue 本身对节点形状一无所知——它只负责把角标画到节点上。矩形卡片节点的配置全部写在 option 里option 在 graph.vue 的 buildNode 中建立，再通过 传进去。话说回来，ECharts 拿到这个 option 后自己把矩形画出来BadgeGraph 只是在画好的节点上叠角标。

“矩形怎么实现”的答案在 option.series.data 里不在 BadgeGraph 的代码里。理解了这条数据流，后面的实现就清楚了：graph.vueBadgeGraph.vue

痛点： 默认的圆形节点无法直接满足业务需要。需要手动 SVG 或者自定义 series，工作量大且维护困难。

把节点从圆形变成矩形，靠的是 symbol 与 symbolSize{:

function buildNode {
const cardSize = CARD_SIZE_MAP?，CARD_SIZE_MAP;说起来，// ...
return {
...node,symbol: 'rect',symbolSize: cardSize,//
itemStyle: {
从color来看。cardTheme.backgroundColor,borderColor: cardTheme.borderColor,borderWidth,shadowBlur: isSelected?话说回来，20 : 5,shadowColor: 'rgba'。shadowOffsetY: isSelected?8 : 2,borderRadius: 8,},// ...
};}

tag='rect' 让 ECharts 用矩形方法绘制节点。tag='symbolSize' 接受二元数组 . 不同层级的尺寸通过映射表统一管理：

const CARD_SIZE_MAP = {
说到root，level1:,level2:,level3:,leaf:,};

tag='itemStyle.borderRadius' 保持直角卡片观感；tag='shadowBlur'。tag='shadowOffsetY' 为卡片加投影，让它从背景里“浮”出来。选中态使用更大的阴影与更深的偏移，以拉开视觉层级。不过，

说到卡片内容。富文本 label 当布局引擎

痛点： 想要在同一个节点内部展示标题、分割线和两列指标，却找不到 “容器+子元素” 的概念，只能硬拼字符串。不过，

ECharts 的富文本允许在一段 label 中定义多个样式块。用 {块名|内容} 引用。这相当于把一个微型布局引擎塞进了 label。

label: {
从show来看，true,position: 'inside',formatter: createSelectedFormatter。rich: createCardLabelRich,}

tag='position:"inside" 让 label 居中绘制在矩形内部。tag='formatter' 决定“画什么文字、按什么结构排”，tag='rich' 决定“每个块长什么样”。

formatter 拼结构

CARD 分三行：标题、分割线、两栏指标。formatter 把它们用换行拼起来：

function createSelectedFormatter {
const content = parseNodeDisplayContent;const title = escapeRichText;if {
return `{title|${title}}`;按理说，}
return .join;}

Coding tip：第三行使用两个块紧挨着。依赖各自的宽度占满整行，实现左右两栏；{divider| } 单独占一行。高度由边框控制，用来绘制顶部分割线。

rich 定义每块的样式

function createCardLabelRich {
const contentWidth = Math.max;怎么说呢，const halfWidth = Math.floor;其实，const dividerColor = showDividerBorder?'rgba' : 'transparent';return {
title:{
至于width，contentWidth,align:'center',color:textColor,fontSize:14,fontWeight:'bold',lineHeight:20,padding:,overflow:'truncate',},divider:{
从width来看，contentWidth,height:1,borderColor:dividerColor,borderWidth:,// 上边框即分割线
padding:,},enterprise:{
width的观点是。halfWidth,align:'center',color:textColor,fontSize:12,lineHeight:18,borderColor:dividerColor,borderWidth:,//右边框形成竖线
padding:,overflow:'truncate',},tech:{
width的观点是，align:'center',color:textColor,fontSize:12,lineHeight:18,padding:,overflow:'truncate',},};}

• 用 tag='borderWidth' 绘制线条：ECharts 富文本块支持四边框数组 —tag='divider' 高度 + 上边框即水平分割线 —tag='enterprise' 左右边框形成垂直分隔线
• 用 width 控制两栏宽度： —enterprise 宽 halfWidth —tech 宽
• overflow:'truncate' 防止文字溢出破坏布局。
• dividerColor 可控： —当 showDividerBorder=false 时设为 transparent。使得选中态或深层级才出现分割线，保持视觉简洁。怎么说呢，

名称解析的观点是。把多行字符串拆成结构化内容

CARD 的业务数据往往是一段多行字符串。需要先把它拆解成结构化对象，以便后续渲染。

function parseNodeDisplayContent{
const lines=String.split.map).filter;
话说回来，const enterprise=parseMetric;const tech=parseMetric;话说回来，return{
title的观点是，enterprise。tech,hasStats:Boolean
};}
function parseMetric{
const trimmed=line.trim;const matched=trimmed.match\s+$/);if{
return{label:.trim,value:.trim};}
return{label:`${label}`,value:''};}
function escapeRichText{
return String.replace;}

\`hasStats\` 决定 formatter 是单行还是三行，避免无指标叶子节点出现空白区域。

主题与选中态

• 卡片配色按层级映射表 ：

层级
root		#1E293B
level1		#433B30
level2		#A38972
level3		#D2C2B5
leaf		#C6BDB8	const CARD_THEME_MAP = { 从root来看。{backgroundColor:'#1E293B',borderColor:'#1E293B',textColor:'#ffffff'},level1:{backgroundColor:'#433B30',borderColor:'#433B30',textColor:'#ffffff'},level2:{backgroundCo lor:'#A38972',borderCol or:'#A38972',textCol or:'#ffffff'},level3:{backgroundCo lor:'#D2C2B5',borderCo lor:'#D2C2B5',textCo lor:'#1f2937'},leaf:{backgroundCo lor:'#C6BDB8',borderCo lor:'#C6BDB8',textCo lor:'#1f2937'} }; 选中态配色 & 层级提高 ： const SELECTED_THEME ={backgroundCol or:'#ffeb3b'。borderCol or:'#ff9800',textCol or :'#000'};const isSelected = selectedNodeId.value===node.id;const cardTheme = isSelected?SELECTED_THEME:;不过，const borderWid th=isSelected?4:borderW idth;话说回来，const z=isSelected?10:zDefault，其实， - \`z\` 控制渲染顺序。使选中卡片漂浮于其他节点之上； - \`showDividerBorder\` 与 \`isSelected\` 联动，仅在需要时显示分割线； function handleNodeClick{ selectedNodeId.value=selectedNodeId.value===node.id?undefined :node.id;怎么说呢，} 因为 `graphData` 是 computed。`selectedNodeId` 改变后会重新调用 `buildNode` 并生成全新 `option`，ECharts 自动完成响应式刷新，无需手动调用 `setOption`。 至于数据流，从树到图 /pain point/: 原始业务数据往往是树结构。而 ECharts graph 要求扁平化的 nodes + edges，如果直接将树传入会报错或布局异常。 js function treeToGraph{ const data=;const links=;function walk{ const level=node.level?，'leaf';data.push({ 从id来看，String,name:String。level,// 暂不加 rect 样式，由 buildNode 完成 }); if{ links.push,target:String});} node.children?.forEach)，} walk;return{data,links};} 从随后来看， js const graphData=computed=>graphStructure.value.data.map)); 最终 option： js series这方面，gravity:-200。friction:.9 },symbol:'circle',// series 默认兜底 data的观点是，gridData.value,links:gridStructure.value.links } ]; 技巧虽然 series 指定了 `symbol:'circle'`。每个 node 在 data 中 声明 `symbol:'rect'`,能覆盖全局设置，实现局部定制。 小结 - **主要思路**：利用 ECharts 富文本 label 当布局引擎，把标题、分割线和双列指标拼装成卡片；说起来， - **外壳**： \ `symbol:'rect'`\ + \ `symbolSize:`\ + \ `itemStyle`\ 实现矩形外观与投影； - **内部结构**：formatter 与 rich 块组合。通过 `borderWidth` 绘制水平/垂直分隔线，用 `width` 控制两栏比例； - **主题 & 状态**：映射表 + computed 响应式驱动，实现层级配色、选中高亮与 z‑index 提高； - **优点**：无需自定义 series 或改源码。只靠配置项就可以完成「标题 + 分隔 + 两栏」的常见卡片需求，而且支持导出 完整保留样式； - **局限**：富文本表达力有限。若需图标、进度条等更复杂布局，需要转向 `graphic` 或自定义渲染。话说回来，