Добавить сервер
hustcc/mcp-echarts
  1. Каталог MCP
  2. hustcc/mcp-echarts

hustcc/mcp-echarts

от hustcc
MCP сервер для генерации диаграмм и визуализации данных на базе Apache ECharts. Поддерживает все опции ECharts, экспорт в png/svg/option и интеграцию с MinIO. Лёгкий и безопасный — всё генерируется локально. Идеально подходит разработчикам, работающим с ИИ-помощниками для быстрого создания интера...

MCP ECharts build npm Version smithery badge npm License Trust Score

Generate Apache ECharts with AI MCP dynamically for chart generation and data analysis. Also you can use mcp-server-chart to generate chart, graph, map.

mcp-echarts
award

✨ Features

  • Fully support all features and syntax of ECharts, include data, style, theme and so on.
  • Support exporting to png, svg, and option formats, with validation for ECharts to facilitate the model's multi-round output of correct syntax and graphics.
  • MinIO Integration, store charts in MinIO object storage and return URLs instead of Base64 data for better performance and sharing capabilities.
  • Lightweight, we can install it easily with zero dependence.
  • Extremely secure, fully generated locally, without relying on any remote services.

🤖 Usage

Prerequisites
  • Node.js 18 or higher is required.
Desktop Applications (stdio transport)

To use with Desktop APP, such as Claude, VSCode, Cline, Cherry Studio, and so on, add the MCP server config below. On Mac system:

{
  "mcpServers": {
    "mcp-echarts": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  }
}
Инструменты были проиндексированы:
generate_area_chart

Создайте диаграмму с областями, чтобы показать тренды данных при непрерывных независимых переменных и наблюдать общий тренд данных, например: перемещение = скорость (средняя или мгновенная) × время: s = v × t. Если ось X — время (t), а ось Y — скорость (v) в каждый момент времени, диаграмма с областями позволяет наблюдать тренд изменения скорости во времени и делать вывод о пройденном расстоянии по размеру области.

Параметры
  • axisXTitlestring

    Set the x-axis title of chart.

  • axisYTitlestring

    Set the y-axis title of chart.

  • dataobject[]обязательный

    Data for area chart, such as, [{ time: '2015', value: 23 }, { time: '2016', value: 32 }]. For multiple series: [{ group: 'Series A', time: '2015', value: 23 }, { group: 'Series B', time: '2015', value: 18 }].

  • heightinteger

    Set the height of the chart, default is 600px.

  • outputTypeenum

    The output type of the diagram. Can be 'png', 'svg' or 'option'. Default is 'png', 'png' will return the rendered PNG image, 'svg' will return the rendered SVG string, and 'option' will return the valid ECharts option.

  • showAreaboolean

    Whether to fill the area under the line. Default is false.

  • showSymbolboolean

    Whether to show symbols on data points. Default is true.

  • smoothboolean

    Whether to use a smooth curve. Default is false.

  • stackboolean

    Whether stacking is enabled. When enabled, line charts require a 'group' field in the data.

  • themeenum

    Set the theme for the chart, optional, default is 'default'.

  • titlestring

    Set the title of the chart.

  • widthinteger

    Set the width of the chart, default is 800px.

generate_bar_chart

Создает столбчатую диаграмму для отображения числовых сравнений между различными категориями, например, для сравнения категориальных данных и для горизонтальных сравнений.

Параметры
  • axisXTitlestring

    Set the x-axis title of chart.

  • axisYTitlestring

    Set the y-axis title of chart.

  • dataobject[]обязательный

    Data for bar chart, such as, [{ category: 'Category A', value: 10 }, { category: 'Category B', value: 20 }] or [{ category: 'Category A', value: 10, group: 'Group A' }].

  • groupboolean

    Whether grouping is enabled. When enabled, bar charts require a 'group' field in the data. When group is true, stack should be false.

  • heightinteger

    Set the height of the chart, default is 600px.

  • outputTypeenum

    The output type of the diagram. Can be 'png', 'svg' or 'option'. Default is 'png', 'png' will return the rendered PNG image, 'svg' will return the rendered SVG string, and 'option' will return the valid ECharts option.

  • stackboolean

    Whether stacking is enabled. When enabled, bar charts require a 'group' field in the data. When stack is true, group should be false.

  • themeenum

    Set the theme for the chart, optional, default is 'default'.

  • titlestring

    Set the title of the chart.

  • widthinteger

    Set the width of the chart, default is 800px.

generate_boxplot_chart

Генерирует боксплот для отображения статистических сводок по разным категориям, например, для сравнения распределения точек данных между категориями.

Параметры
  • axisXTitlestring

    Set the x-axis title of chart.

  • axisYTitlestring

    Set the y-axis title of chart.

  • dataobject[]обязательный

    Data for boxplot chart, such as, [{ category: 'Category A', value: 10 }, { category: 'Category B', value: 20, group: 'Group A' }].

  • heightinteger

    Set the height of the chart, default is 600px.

  • outputTypeenum

    The output type of the diagram. Can be 'png', 'svg' or 'option'. Default is 'png', 'png' will return the rendered PNG image, 'svg' will return the rendered SVG string, and 'option' will return the valid ECharts option.

  • themeenum

    Set the theme for the chart, optional, default is 'default'.

  • titlestring

    Set the title of the chart.

  • widthinteger

    Set the width of the chart, default is 800px.

generate_candlestick_chart

Генерирует свечной график для визуализации финансовых данных, таких как цены акций, криптовалют или другие данные OHLC (Open-High-Low-Close).

Параметры
  • dataobject[]обязательный

    Data for candlestick chart, such as, [{ date: '2023-01-01', open: 100, high: 110, low: 95, close: 105, volume: 10000 }].

  • heightinteger

    Set the height of the chart, default is 600px.

  • outputTypeenum

    The output type of the diagram. Can be 'png', 'svg' or 'option'. Default is 'png', 'png' will return the rendered PNG image, 'svg' will return the rendered SVG string, and 'option' will return the valid ECharts option.

  • showVolumeboolean

    Whether to show volume chart below candlestick. Default is false.

  • themeenum

    Set the theme for the chart, optional, default is 'default'.

  • titlestring

    Set the title of the chart.

  • widthinteger

    Set the width of the chart, default is 800px.

generate_echarts

Генерирует визуальные диаграммы с помощью Apache ECharts, используя опции и конфигурацию echarts динамически. Apache ECharts — это библиотека визуализации с открытым исходным кодом на JavaScript, которая создает интерактивные диаграммы и визуализации в веб-приложениях. Поддерживает множество типов диаграмм: линейные, столбчатые, круговые, точечные графики и другие. ECharts настраивается и интегрируется с различными источниками данных для создания динамических визуализаций.

Параметры
  • echartsOptionstringобязательный

    ECharts option and configuration used to generate charts. For example: { "title": { "text": "ECharts Entry Example", "left": "center", "top": "2%" }, "tooltip": {}, "xAxis": { "data": ["shirt", "cardigan", "chiffon", "pants", "heels", "socks"] }, "yAxis": {}, "series": [{ "name": "Sales", "type": "bar", "data": [5, 20, 36, 10, 10, 20] }] } ATTENTION: A valid ECharts option must be a valid JSON string, and cannot be empty.

  • heightnumber

    The height of the ECharts in pixels. Default is 600.

  • outputTypeenum

    The output type of the diagram. Can be 'png', 'svg' or 'option'. Default is 'png', 'png' will return the rendered PNG image, 'svg' will return the rendered SVG string, and 'option' will return the valid ECharts option.

  • themeenum

    ECharts theme, optional. Default is 'default'.

  • widthnumber

    The width of the ECharts in pixels. Default is 800.

generate_funnel_chart

Чтобы построить воронкообразную диаграмму, визуализирующую сокращение данных на каждом этапе — например, конверсию от посещения сайта до завершения покупки — используй библиотеку plotly (Python). Ниже пример с типичными стадиями: визиты → регистрация → добавление в корзину → оформление заказа → покупка. python import plotly.express as px # Данные: этапы и количество пользователей на каждом stages = [ "Посетили сайт", # 1000 "Зарегистрировались", # 600 "Добавили в корзину", # 300 "Оформили заказ", # 120 "Совершили покупку" # 50 ] values = [1000, 600, 300, 120, 50] # Построение воронки fig = px.funnel( x=values, y=stages, title="Воронка конверсии: от визита до покупки", labels={"x": "Количество пользователей", "y": "Этап"} ) fig.show() Если хочешь интерактивную воронку с процентами конверсии между этапами, используй plotly.graph_objects: python import plotly.graph_objects as go stages = ["Посетили сайт", "Зарегистрировались", "Добавили в корзину", "Оформили заказ", "Купили"] values = [1000, 600, 300, 120, 50] fig = go.Figure(go.Funnel( y=stages, x=values, textposition="inside", textinfo="value+percent initial" )) fig.update_layout(title="Воронка конверсии") fig.show() Этот код выведет диаграмму, где ширина каждого блока пропорциональна количеству пользователей на этапе, а числа показывают абсолютные значения и процент от исходного числа. Запусти в любой среде с Python и установленным plotly.

Параметры
  • dataobject[]обязательный

    Data for funnel chart, such as, [{ category: 'Browse Website', value: 50000 }, { category: 'Add to Cart', value: 35000 }, { category: 'Generate Order', value: 25000 }].

  • heightinteger

    Set the height of the chart, default is 600px.

  • outputTypeenum

    The output type of the diagram. Can be 'png', 'svg' or 'option'. Default is 'png', 'png' will return the rendered PNG image, 'svg' will return the rendered SVG string, and 'option' will return the valid ECharts option.

  • themeenum

    Set the theme for the chart, optional, default is 'default'.

  • titlestring

    Set the title of the chart.

  • widthinteger

    Set the width of the chart, default is 800px.

generate_gauge_chart

Генерирует график-индикатор для отображения текущего состояния одного показателя, например, загрузки ЦП, хода выполнения или оценок производительности.

Параметры
  • dataobject[]обязательный

    Data for gauge chart, such as, [{ name: 'CPU Usage', value: 75 }]. Multiple gauges can be displayed.

  • heightinteger

    Set the height of the chart, default is 600px.

  • maxnumber

    Maximum value of the gauge, default is 100.

  • minnumber

    Minimum value of the gauge, default is 0.

  • outputTypeenum

    The output type of the diagram. Can be 'png', 'svg' or 'option'. Default is 'png', 'png' will return the rendered PNG image, 'svg' will return the rendered SVG string, and 'option' will return the valid ECharts option.

  • themeenum

    Set the theme for the chart, optional, default is 'default'.

  • titlestring

    Set the title of the chart.

  • widthinteger

    Set the width of the chart, default is 800px.

generate_graph_chart

Генерирует граф сетевых связей для отображения отношений (рёбер) между сущностями (узлами), например, отношений между людьми в социальных сетях.

Параметры
  • dataobjectобязательный

    Data for network graph chart, such as, { nodes: [{ id: 'node1', name: 'Node 1' }], edges: [{ source: 'node1', target: 'node2' }] }

  • heightinteger

    Set the height of the chart, default is 600px.

  • layoutenum

    Layout algorithm for the graph. Default is 'force'.

  • outputTypeenum

    The output type of the diagram. Can be 'png', 'svg' or 'option'. Default is 'png', 'png' will return the rendered PNG image, 'svg' will return the rendered SVG string, and 'option' will return the valid ECharts option.

  • themeenum

    Set the theme for the chart, optional, default is 'default'.

  • titlestring

    Set the title of the chart.

  • widthinteger

    Set the width of the chart, default is 800px.

generate_heatmap_chart

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

Параметры
  • axisXTitlestring

    Set the x-axis title of chart.

  • axisYTitlestring

    Set the y-axis title of chart.

  • dataobject[]обязательный

    Data for heatmap chart, such as, [{ x: 'Mon', y: '12AM', value: 5 }, { x: 'Tue', y: '1AM', value: 3 }].

  • heightinteger

    Set the height of the chart, default is 600px.

  • outputTypeenum

    The output type of the diagram. Can be 'png', 'svg' or 'option'. Default is 'png', 'png' will return the rendered PNG image, 'svg' will return the rendered SVG string, and 'option' will return the valid ECharts option.

  • themeenum

    Set the theme for the chart, optional, default is 'default'.

  • titlestring

    Set the title of the chart.

  • widthinteger

    Set the width of the chart, default is 800px.

generate_line_chart

Генерирует линейный график для отображения тенденций во времени, например, отношение продаж компьютеров Apple к прибыли Apple изменилось с 2000 по 2016 год.

Параметры
  • axisXTitlestring

    Set the x-axis title of chart.

  • axisYTitlestring

    Set the y-axis title of chart.

  • dataobject[]обязательный

    Data for line chart, such as, [{ time: '2015', value: 23 }, { time: '2016', value: 32 }]. For multiple series: [{ group: 'Series A', time: '2015', value: 23 }, { group: 'Series B', time: '2015', value: 18 }].

  • heightinteger

    Set the height of the chart, default is 600px.

  • outputTypeenum

    The output type of the diagram. Can be 'png', 'svg' or 'option'. Default is 'png', 'png' will return the rendered PNG image, 'svg' will return the rendered SVG string, and 'option' will return the valid ECharts option.

  • showAreaboolean

    Whether to fill the area under the line. Default is false.

  • showSymbolboolean

    Whether to show symbols on data points. Default is true.

  • smoothboolean

    Whether to use a smooth curve. Default is false.

  • stackboolean

    Whether stacking is enabled. When enabled, line charts require a 'group' field in the data.

  • themeenum

    Set the theme for the chart, optional, default is 'default'.

  • titlestring

    Set the title of the chart.

  • widthinteger

    Set the width of the chart, default is 800px.

generate_parallel_chart

Генерирует параллельную координатную диаграмму для отображения многомерных данных, например, для сравнения разных продуктов по нескольким атрибутам.

Параметры
  • dataobject[]обязательный

    Data for parallel chart, such as, [{ name: 'Product A', values: [4.2, 3.4, 2.3, 1.8] }].

  • dimensionsstring[]обязательный

    Names of the dimensions/axes, such as, ['Price', 'Quality', 'Service', 'Value'].

  • heightinteger

    Set the height of the chart, default is 600px.

  • outputTypeenum

    The output type of the diagram. Can be 'png', 'svg' or 'option'. Default is 'png', 'png' will return the rendered PNG image, 'svg' will return the rendered SVG string, and 'option' will return the valid ECharts option.

  • themeenum

    Set the theme for the chart, optional, default is 'default'.

  • titlestring

    Set the title of the chart.

  • widthinteger

    Set the width of the chart, default is 800px.

generate_pie_chart

Создаёт круговую диаграмму для отображения долей частей, например, рыночной доли и распределения бюджета.

Параметры
  • dataobject[]обязательный

    Data for pie chart, such as, [{ category: 'Category A', value: 27 }, { category: 'Category B', value: 25 }].

  • heightinteger

    Set the height of the chart, default is 600px.

  • innerRadiusnumber

    Set the innerRadius of pie chart, the value between 0 and 1. Set the pie chart as a donut chart. Set the value to 0.6 or number in [0 ,1] to enable it.

  • outputTypeenum

    The output type of the diagram. Can be 'png', 'svg' or 'option'. Default is 'png', 'png' will return the rendered PNG image, 'svg' will return the rendered SVG string, and 'option' will return the valid ECharts option.

  • themeenum

    Set the theme for the chart, optional, default is 'default'.

  • titlestring

    Set the title of the chart.

  • widthinteger

    Set the width of the chart, default is 800px.

generate_radar_chart

Генерирует лепестковую диаграмму для отображения многомерных данных (четыре и более измерений), например, для оценки телефонов Huawei и Apple по пяти параметрам: удобство использования, функциональность, камера, результаты тестов производительности и время работы от аккумулятора.

Параметры
  • dataobject[]обязательный

    Data for radar chart, such as, [{ name: 'Design', value: 70 }, { name: 'Performance', value: 85 }] or [{ name: 'Design', value: 70, group: 'iPhone' }].

  • heightinteger

    Set the height of the chart, default is 600px.

  • outputTypeenum

    The output type of the diagram. Can be 'png', 'svg' or 'option'. Default is 'png', 'png' will return the rendered PNG image, 'svg' will return the rendered SVG string, and 'option' will return the valid ECharts option.

  • themeenum

    Set the theme for the chart, optional, default is 'default'.

  • titlestring

    Set the title of the chart.

  • widthinteger

    Set the width of the chart, default is 800px.

generate_sankey_chart

Генерирует диаграмму Санкея для визуализации потока данных между различными этапами или категориями, например, путь пользователя от загрузки страницы до завершения покупки.

Параметры
  • dataobject[]обязательный

    Data for sankey chart, such as, [{ source: 'Landing Page', target: 'Product Page', value: 50000 }, { source: 'Product Page', target: 'Add to Cart', value: 35000 }].

  • heightinteger

    Set the height of the chart, default is 600px.

  • nodeAlignenum

    Alignment of nodes in the sankey chart, such as, 'left', 'right', or 'justify'.

  • outputTypeenum

    The output type of the diagram. Can be 'png', 'svg' or 'option'. Default is 'png', 'png' will return the rendered PNG image, 'svg' will return the rendered SVG string, and 'option' will return the valid ECharts option.

  • themeenum

    Set the theme for the chart, optional, default is 'default'.

  • titlestring

    Set the title of the chart.

  • widthinteger

    Set the width of the chart, default is 800px.

generate_scatter_chart

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

Параметры
  • axisXTitlestring

    Set the x-axis title of chart.

  • axisYTitlestring

    Set the y-axis title of chart.

  • dataobject[]обязательный

    Data for scatter chart, such as, [{ x: 10, y: 15 }, { x: 20, y: 25 }].

  • heightinteger

    Set the height of the chart, default is 600px.

  • outputTypeenum

    The output type of the diagram. Can be 'png', 'svg' or 'option'. Default is 'png', 'png' will return the rendered PNG image, 'svg' will return the rendered SVG string, and 'option' will return the valid ECharts option.

  • themeenum

    Set the theme for the chart, optional, default is 'default'.

  • titlestring

    Set the title of the chart.

  • widthinteger

    Set the width of the chart, default is 800px.

generate_sunburst_chart

Генерирует диаграмму sunburst для отображения многоуровневых иерархических данных, таких как организационная структура, иерархия файловой системы или разбивка по категориям.

Параметры
  • dataobject[]обязательный

    Data for sunburst chart, such as, [{ name: 'Technology', value: 100, children: [{ name: 'Frontend', value: 60, children: [{ name: 'React', value: 30 }] }] }].

  • heightinteger

    Set the height of the chart, default is 600px.

  • outputTypeenum

    The output type of the diagram. Can be 'png', 'svg' or 'option'. Default is 'png', 'png' will return the rendered PNG image, 'svg' will return the rendered SVG string, and 'option' will return the valid ECharts option.

  • themeenum

    Set the theme for the chart, optional, default is 'default'.

  • titlestring

    Set the title of the chart.

  • widthinteger

    Set the width of the chart, default is 800px.

generate_tree_chart

Генерирует древовидную диаграмму для отображения иерархической структуры данных, например, организационной диаграммы, генеалогического древа или структуры файлового каталога.

Параметры
  • dataobjectобязательный

    Tree data structure, such as, { name: 'Root', children: [{ name: 'Child 1' }, { name: 'Child 2' }] }.

  • heightinteger

    Set the height of the chart, default is 600px.

  • layoutenum

    Tree layout type. Default is 'orthogonal'.

  • orientenum

    Tree orientation. LR=left-to-right, RL=right-to-left, TB=top-to-bottom, BT=bottom-to-top. Default is 'LR'.

  • outputTypeenum

    The output type of the diagram. Can be 'png', 'svg' or 'option'. Default is 'png', 'png' will return the rendered PNG image, 'svg' will return the rendered SVG string, and 'option' will return the valid ECharts option.

  • themeenum

    Set the theme for the chart, optional, default is 'default'.

  • titlestring

    Set the title of the chart.

  • widthinteger

    Set the width of the chart, default is 800px.

generate_treemap_chart

Создает диаграмму treemap для отображения иерархических данных и интуитивно показывает сравнения между элементами одного уровня, например, показывает использование дискового пространства с помощью treemap.

Параметры
  • dataobject[]обязательный

    Data for treemap chart, such as, [{ name: 'Design', value: 70, children: [{ name: 'Tech', value: 20 }] }].

  • heightinteger

    Set the height of the chart, default is 600px.

  • outputTypeenum

    The output type of the diagram. Can be 'png', 'svg' or 'option'. Default is 'png', 'png' will return the rendered PNG image, 'svg' will return the rendered SVG string, and 'option' will return the valid ECharts option.

  • themeenum

    Set the theme for the chart, optional, default is 'default'.

  • titlestring

    Set the title of the chart.

  • widthinteger

    Set the width of the chart, default is 800px.

Похожие MCP-сервера

hustcc/mcp-mermaid

hustcc/mcp-mermaid

MCP сервер динамически генерирует диаграммы Mermaid через AI. Полезен для интеграции с ИИ-агентами: поддерживает экспорт в SVG, PNG, base64, настройку фона и темы. Работает через SSE и Streamable.

TypeScript⭐ 634
antv/mcp-server-chart

antv/mcp-server-chart

официальный

MCP-сервер на базе AntV, который через инструменты модели создаёт более 26 видов графиков и карт. Интегрируется с Claude, VSCode и другими AI-клиентами, полезен для визуализации данных и анализа пр...

TypeScript⭐ 4360
idea-research/dino-x-mcp

idea-research/dino-x-mcp

MCP сервер DINO-X на базе моделей DINO-X и Grounding DINO даёт точное обнаружение объектов и понимание сцен для мультимодальных приложений. Полезен разработчикам визуальных агентов и пайплайнов автоматизации. Поддерживает STDIO и HTTP.

TypeScript⭐ 110
marzukia/charted

marzukia/charted

MCP сервер charted - лёгкий инструмент для создания 15 типов графиков (SVG/PNG) без внешних зависимостей. Запускается одной командой, идеален для AI-агентов и Python-проектов, готов к интеграции с ...

Python⭐ 11
nteract/semiotic

nteract/semiotic

Semiotic — React-библиотека визуализации данных со встроенным MCP-сервером. AI-ассистенты могут рендерить графики, проверять конфигурации и получать рекомендации по чартам. Сотни типов диаграмм — о...

TypeScript⭐ 2705
isaacwasserman/mcp-vegalite-server

isaacwasserman/mcp-vegalite-server

MCP-сервер для визуализации данных: через LLM можно сохранять таблицы и строить графики на Vega-Lite. Полезен аналитикам и разработчикам, автоматизирующим построение визуализаций.

Python⭐ 100
© Каталог MCP, 2026. Все права защищены.
Проект не аффилирован с Anthropic и любыми упомянутыми продуктами.
Все названия и торговые марки принадлежат их владельцам.
Контакты для связи: hi@mcp-katalog.ru

Лука Никитин