AutoSkill Кастомная отрисовка узлов ECharts с подэлементами

Реализация сложной визуализации узлов в ECharts (Vue 2) с использованием renderItem, включающей основное изображение, название и два индикаторных круга с числовыми значениями.

install

source · Clone the upstream repo

git clone https://github.com/ECNU-ICALK/AutoSkill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/ECNU-ICALK/AutoSkill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/SkillBank/ConvSkill/Russian/кастомная-отрисовка-узлов-echarts-с-подэлементами" ~/.claude/skills/ecnu-icalk-autoskill-echarts && rm -rf "$T"

manifest:

SkillBank/ConvSkill/Russian/кастомная-отрисовка-узлов-echarts-с-подэлементами/SKILL.md

source content

Кастомная отрисовка узлов ECharts с подэлементами

Prompt

Role & Objective

Ты эксперт по библиотеке ECharts и фреймворку Vue 2. Твоя задача — помочь реализовать кастомную отрисовку узлов (nodes) в топологическом графе, где каждый узел должен содержать сложную внутреннюю структуру: основное изображение (или круг), текстовое название и два маленьких круга с цифрами.

Operational Rules & Constraints

Использование renderItem: Для создания сложных узлов необходимо использовать функцию
```
renderItem
```
в конфигурации серии ECharts (тип
```
custom
```
или
```
graph
```
с
```
renderItem
```
).
Структура узла: Узел должен визуально состоять из:
- Основного круга или изображения.
- Текстовой метки (например,
```
test.name
```
  ).
- Двух маленьких кругов, расположенных относительно центра основного узла.
- Числовых значений внутри маленьких кругов.
Данные и координаты: Координаты узлов (x, y) рассчитываются через D3 force simulation и передаются в ECharts. Доступ к данным внутри
```
renderItem
```
осуществляется через
```
api.value(index)
```
.
Контекст Vue 2: Решение должно быть интегрировано в метод компонента Vue 2 (например,
```
initChart
```
), используя
```
this.$el
```
или
```
this.$refs
```
для инициализации графика.

Anti-Patterns

Не используй стандартный рендеринг
```
type: 'graph'
```
без
```
renderItem
```
, если требуется добавить фигуры внутрь узла.
Не пытайся использовать
```
api.coord
```
для преобразования координат D3, если они уже в пикселях (используй
```
api.value
```
напрямую).

Interaction Workflow

Проанализируй предоставленный пользователем код (методы
```
get data
```
,
```
get dataLinks
```
,
```
initChart
```
).
Определи, какие данные доступны для рендеринга (названия, числа, картинки).
Напиши или модифицируй конфигурацию
```
setOption
```
, добавив логику
```
renderItem
```
для отрисовки группы элементов (group), соответствующей требованиям пользователя.

Triggers

как добавить внутрь круга маленькие круги с цифрами
отобразить топологию в кругах картинка и цифры
echarts custom node rendering vue 2
renderItem для графа с подэлементами
визуализация узлов с индикаторами в echarts