MCP ECharts MCP — Сценарии использования, Установка & Живое демо

Зачем использовать

Ключевые функции

Более 15 инструментов для построения диаграмм, охватывающих семейство ECharts.
Полная поддержка синтаксиса ECharts — агенты могут использовать любую опцию серии.
Экспортируйте PNG, SVG или необработанный вариант JSON.
Отсутствие зависимости от облака — рендеринг локальный.
Дополнительное хранилище MinIO для удобных URL-адресов

Живое демо

Как выглядит на практике

mcp-echarts.replay ▶ готово

0/0

Установка

Выберите клиент

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "mcp-echarts": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  }
}

Откройте Claude Desktop → Settings → Developer → Edit Config. Перезапустите после сохранения.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "mcp-echarts": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  }
}

Cursor использует ту же схему mcpServers, что и Claude Desktop. Конфиг проекта приоритетнее глобального.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "mcp-echarts": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  }
}

Щёлкните значок MCP Servers на боковой панели Cline, затем "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "mcp-echarts": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  }
}

Тот же формат, что и Claude Desktop. Перезапустите Windsurf для применения.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "mcp-echarts",
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  ]
}

Continue использует массив объектов серверов, а не map.

~/.config/zed/settings.json

{
  "context_servers": {
    "mcp-echarts": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "mcp-echarts"
        ]
      }
    }
  }
}

Добавьте в context_servers. Zed перезагружается автоматически.

claude mcp add mcp-echarts -- npx -y mcp-echarts

Однострочная команда. Проверить: claude mcp list. Удалить: claude mcp remove.

Сценарии использования

Реальные сценарии: MCP ECharts

Превратите таблицу чисел в диаграмму одним вызовом инструмента

👤 Аналитики, менеджеры по проектам и инженеры, работающие в чате ⏱ ~5 min beginner

Когда использовать: У вас небольшой набор данных, и вам нужно визуальное представление, не открывая электронную таблицу.

Предварительные требования

Узел 18+ — установка нвм 18

Поток

Опишите диаграмму

Гистограмма активных пользователей за неделю: понедельник 820, вторник 905, среда 11:20, четверг 980, пятница 13:40, суббота 780, воскресенье 610. Назовите ее «WAU по дням».✓ Скопировано

→ Агент выбираетgenerate_bar_chart с правильными метками и значениями оси X.
Экспортируйте PNG

Экспортируйте в формате PNG и сохраните его в ~/charts/wau.png.✓ Скопировано

→ Файл возвращен; png_path в результатах инструмента

Итог: Диаграмма, которую можно добавить в колоду или документ, не выходя из чата.

Подводные камни

Запрос круговой диаграммы для набора данных с более чем 30 категориями — Вместо этого агенту следует предложить панель/тепловую карту; заставить его использовать гистограмму, круговая диаграмма нечитабельна

Сочетать с: filesystem

Получите опцию необработанных ECharts для вставки в панель управления React/Vue.

👤 Разработчики внешнего интерфейса создают внутренние инструменты ⏱ ~15 min intermediate

Когда использовать: Вы хотите, чтобы Клод разработал конфигурацию диаграммы, чтобы вы могли настраивать ее только в своем приложении.

Предварительные требования

Интерфейс с использованием ECharts — npm установить электронные диаграммы

Поток

Запросить опцию JSON

Создайте параметр ECharts для составной диаграммы с областями: три серии (прямые, органические, платные), ежемесячно за 2025 год.✓ Скопировано

→ Возвращаемая форма — это объект опции с series[].type:'line', areaStyle и stack:'total'
Перейдите в свой компонент

Теперь выдайте его как константу TypeScript с именем ExportOption.✓ Скопировано

→ TS const готов к вставке

Итог: Готовая к использованию конфигурация ECharts без создания шаблона вручную.

Подводные камни

Агент возвращает PNG, когда вам нужна эта опция — Скажите «Вариант возврата только JSON — без рендеринга».

Сочетать с: antv-chart

Визуализируйте поток (воронку, путешествие, конверсию) в виде санки.

👤 Аналитики роста/продукта ⏱ ~10 min beginner

Когда использовать: Вам нужна блок-схема колоды, и Sankey — подходящий инструмент.

Поток

Описать узлы и потоки

Санки: Лендинг (1000) → Регистрация (420) → Активирован (310) → Оплачен (95). Показать проценты выпадения.✓ Скопировано

→ Правильная структура узла/ссылки; метки включают количество
Экспортировать SVG

Экспортируйте SVG, чтобы он масштабировался в Keynote.✓ Скопировано

→ Путь SVG сохранен.

Итог: Четкий санки для обзора воронки, без Фигмы.

Сочетать с: markmap-mcp-server

Публикуйте созданные диаграммы в MinIO для совместного использования.

👤 Команды, использующие автономное хранилище объектов ⏱ ~20 min intermediate

Когда использовать: Вам нужны воспроизводимые URL-адреса для диаграмм, на которые вы будете ссылаться из Slack/Notion.

Предварительные требования

Конечная точка MinIO + учетные данные — Предоставьте переменные env MINIO_* в конфигурации вашего клиента MCP.

Поток

Настроить окружение

Установите MINIO_ENDPOINT, MINIO_ACCESS_KEY, MINIO_SECRET_KEY, MINIO_BUCKET_NAME в конфигурации MCP.✓ Скопировано

→ Сервер сообщает, что MinIO включен при запуске
Сгенерировать и загрузить

График доходов по регионам; загрузите в MinIO и дайте мне URL.✓ Скопировано

→ Возвращен общедоступный (или заранее подписанный) URL-адрес.

Итог: Стабильные ссылки на диаграммы, которые не ломаются после смены чата.

Подводные камни

Утечка учетных данных в конфигурации — Используйте выделенного пользователя IAM в области сегмента, а не корневой ключ MinIO.

Сочетать с: s3-like MCPs

Комбинации

Сочетайте с другими MCP — эффект x10

mcp-echarts + filesystem

Чтение CSV, извлечение столбцов, построение диаграмм

Прочтите файл data/sales.csv и постройте столбец «Доход» по «региону» в виде гистограммы.✓ Скопировано

mcp-echarts + bigquery-server

Запустите SQL, затем постройте график результата

Запрос регистраций из BigQuery за последние 30 дней; сюжетный день считается за линию.✓ Скопировано

mcp-echarts + antv-chart

Выбирайте между ECharts и AntV в зависимости от варианта использования.

Для панели управления для китайской аудитории отдайте предпочтение ECharts; для минимального объема данных выберите AntV.✓ Скопировано

Инструменты

Что предоставляет этот MCP

Инструмент	Входные данные	Когда вызывать
generate_line_chart	xAxis: array, series: array<number[]>, title?: str	Тренд по упорядоченной оси (время, положение)
generate_bar_chart	categories, values, stack?: bool	Сравнить отдельные категории
generate_pie_chart	items: [{name, value}]	Доля от общего числа с ≤8 срезами
generate_scatter_chart	points: [[x,y]]	Визуализации корреляции или кластеризации
generate_heatmap	matrix: number[][], rows, cols	Матрицы плотности или путаницы
generate_sankey	nodes, links	Поток/воронка между дискретными состояниями
generate_echarts_option	free-form option object	Если вам нужен полный синтаксис ECharts, а не шаблонная диаграмма

Стоимость и лимиты

Во что обходится

Квота API: Нет — локальный рендеринг
Токенов на вызов: Маленький: вход объекта опции, выход наружу
Деньги: Бесплатно
Совет: Попросите опцию JSON, если вы будете использовать ее много раз; попросите PNG для разовых акций.

Безопасность

Права, секреты, радиус поражения

Хранение учётных данных: Кредиты MinIO только в переменных окружения. Никакого хранения ваших данных на стороне сервера, кроме отображаемой диаграммы.

Исходящий трафик: По умолчанию выхода нет. Экспорт MinIO загружается только на настроенную вами конечную точку.

Изображения диаграмм могут содержать конфиденциальные данные. Проверьте перед публикацией в общую корзину MinIO.

Устранение неполадок

Частые ошибки и исправления

PNG-рендер пуст

Убедитесь, что типы данных серии совпадают (числа, а не строки), а длина оси X равна длине серии.

Проверить: Inspect the option JSON; types should be number arrays

Ошибка загрузки MinIO: несоответствие подписи.

Проверьте MINIO_USE_SSL, MINIO_PORT и убедитесь, что ключи доступа/секретные ключи принадлежат одному и тому же экземпляру MinIO.

Проверить: mc admin info myminio/

Отсутствуют шрифты / символы CJK в виде прямоугольников

Установите шрифт с поддержкой CJK в среде, где работает сервер MCP (например, Noto Sans CJK).

Проверить: fc-list | grep -i cjk

Альтернативы

MCP ECharts в сравнении

Альтернатива	Когда использовать	Компромисс
antv-chart	Вы предпочитаете самоуверенные настройки AntV по умолчанию и китайскую документацию.	Меньший словарный запас диаграмм
markmap-mcp-server	Вам нужна иерархия, а не статистические диаграммы	Другой класс вывода
mermaid-skill	Вам нужны блок-схемы/диаграммы последовательностей, а не диаграммы данных.	Диаграммы ≠ диаграммы

Ещё

Ресурсы

📖 Читать официальный README на GitHub

🐙 Открытые задачи

🔍 Все 400+ MCP-серверов и Skills