const createIcon = => {
const size = config.size || 12;const el = new echarts.graphic.Image({
从style来看，{
再看image，config.image。width: size,height: size,x: 0,y: 0
至于},z，10,// 浮在节点之上
silent的观点是，true // 不阻挡底层交互
});el.hide，if zr.value.add;按理说，return el;}，老实说，

Pitfall："不要单独 import zrender 包去拿 Image". 在 pnpm 环境下 zrender 是 echarts 的间接依赖。直接 会报找不到模块。使用 即可。

`style.image` 接 URL，Vite import SVG/PNG 返回的 URL 可以直接用。`silent: true` 很关键——否则角标会挡住底层节点的拖拽和缩放事件。`z` 保证它浮在节点之上。

el.attr;// 左上角坐标
// 显隐
el.show;el.hide，

用 rendered 事件驱动，而不是 rAF 轮询

ECharts 的每一次布局/交互结束后都会触发 'rendered'。利用它可以避免持续轮询导致的不必要开销。

chart.on;

`scheduleUpdate` 内部使用一次性 `requestAnimationFrame` 合并同帧多次触发：

let rafId = null;let frameSkip = 0;const scheduleUpdate = => {
if return;rafId = requestAnimationFrame => {
rafId = null;if {
rebuild;needRebuild = false;return，}
if === 0) return;其实，// 跳过偶数帧
updatePositions;})，};

数据联动与位置读取

`itemModel.get` 判断是否需要绘制某个徽章：

data.each => {
const itemModel = data.getItemModel;
for {
if ) continue;// falsy 不绘制
// 创建或复用图标...
}
});

ECharts v6 中 force 布局写入位置方式变化，需要优先从 graph 中读取布局：

const node = graph && graph.getNodeByIndex;const layout =
) || data.getItemLayout;js
// 转换为像素坐标
const pixel = chart.convertToPixel;

四角定位

`POS_VEC` 定义四个方向向量：

const POS_VEC = {
topLeft:。topRight:,bottomLeft:,bottomRight:
};js
// 偏移量
const symbolSize = data.getItemVisual ||;不过，const radius = Array.isArray
Math.max / 2
: symbolSize / 2;const offset = radius * Math.SQRT2 / 2;// √2/2 投影到对角线
// 最终像素坐标
const nx = cx + vec * offset;const ny = cy + vec * offset;// 转换为左上左坐标并显示
const place = => {
el.attr;说起来，el.show，};

至于性能调整，把“建池”和“定位”拆开

`rebuild` 在配置或徽章集合变化时执行。只负责创建/回收 ZRender Image 并缓存几何参数；`updatePositions` 每帧仅做增量定位。

// 建池阶段
const iconPool = new Map;// idx -> Map
function rebuild {
iconPool.clear;data.each => {
const itemModel = data.getItemModel;const poolMap = new Map;for {
if ) continue;const el = createIcon;const vec = POS_VEC;const entry= {el,size:cfg.size||12,dx:vec。dy:vec,offset:calcOffset,lastPx:null};poolMap.set，}
if iconPool.set;})，话说回来，}
js
// 增量定位阶段
function updatePositions {
for {
const node = graph && graph.getNodeByIndex;const layout= ) || data.getItemLayout;const pixel =);
 for ) {
const nx = pixel + entry.dx * entry.offset;老实说，const ny = pixel + entry.dy * entry.offset;// 小幅移动直接跳过 → 减少 attr 调用
if (entry.lastPx &&
Math.abs 


}
}


跳帧 + finished 补偿

`frameSkip` 用于每两帧更新一次以降低高频渲染成本；收敛后通过 `finished` 强制一次精准定位防止最终一帧滞后。


chart.on => {
if { cancelAnimationFrame;rafId=null，}
needRebuild?rebuild : updatePositions;})，


顺带提一个 v6 的废弃 API 

`focusNodeAdjacency:true` 已被废弃，请改为：


emphasis:{ focus:'adjacency' }




小结 






Avoid setOption – directly manipulate ZRender.

SPLIT one‑time heavy work and per‑frame lightweight positioning.


Avoiding `setOption` prevents force‑layout dead‑loops;separating `rebuild` from `updatePositions` keeps per‑frame cost near zero after convergence. `rendered` drives real‑time follow‑up while `finished` patches occasional skipped frame. 四角定位只需方向向量乘以半径投影，一行代码搞定。

The consumer only needs to supply a normal ECharts `option` and a `badges` configuration like:


{
"badges": {
"iconLeft": { "image": "/icons/left.svg","position":"topLeft","size":12 },"iconRight":{ "image": "/icons/right.svg","position":"topRight"。"size":12 }
}
}

 


This component handles drawing on canvas,data binding,realtime following and performance optimization internally—keeping external API declarative.

}