В Visual Paradigm мы постоянно расширяем границы визуализации сложных систем и наборов данных разработчиками, аналитиками данных и специалистами в области технологий. Недавно мы представилиVPasCode, единая платформа преобразования текста в диаграммы, разработанная для устранения неудобств при переключении между несколькими инструментами рисования. Поддерживая популярные синтаксисы, такие как Mermaid, PlantUML и Graphviz, в единой интегрированной среде разработки, VPasCode быстро стала предпочтительной экосистемой для быстрой и точной визуализации диаграмм.
Сегодня мы с радостью объявляем о значительном улучшении нашего инструментария:VPasCode теперь нативно поддерживает Apache ECharts. Это дополнение превращает нашу среду для создания диаграмм в высокопроизводительный, управляемый кодомсоздатель диаграмм. Теперь вы можете преобразовывать свои конфигурации JSON или описания, подготовленные с помощью ИИ, в насыщенные, интерактивные визуализации данных в режиме реального времени.
Благодаря нашему интерфейсу с разделением экрана на две части, процесс остается простым и интуитивно понятным: введите объект конфигурации ECharts в левой панели, а интерактивные компоненты панели управления будут отображаться без проблем на правой панели.
Почему стоит выбрать VPasCode в качестве генератора диаграмм?
В то время как стандартные статические инструменты визуализации заставляют вас перетаскивать, размещать и вручную настраивать отдельные пиксели, VPasCode полностью полагается на структурированный код. Интеграция ECharts открывает уникальные преимущества для современных технических команд:
- Единая архитектура: Без усилий переключайтесь между чертежами архитектуры приложений (через PlantUML/Mermaid) и панелями аналитики данных (через ECharts) в одной и той же вкладке.
- Рабочие процессы, управляемые ИИ: Используйте нашу платформу как интеллектуальныйгенератор диаграмм с ИИ. Опишите свои требования к данным нативным способом (в нашем чат-боте для диаграмм с ИИ), и увидите точные визуализации, автоматически созданные без ручной настройки стилей.
- Высокая степень совместного использования состояний: Каждая конфигурация диаграммы сжимается в уникальный, легко передаваемый URL, что делает совместную работу над проверкой кода, документацией в вики или живыми презентациями клиентам чрезвычайно простой.
Изучение живых примеров ECharts в VPasCode
Чтобы продемонстрировать производительность нашей обновленнойгенератора диаграмм, мы подготовили несколько шаблонов визуализации данных промышленного уровня. Вы можете взаимодействовать с каждым примером напрямую, перейдя по сопутствующим ссылкам для тестирования.
1. Стековая столбчатая диаграмма (анализ продаж по регионам)
Идеально подходит для анализа абсолютных сумм по группам при одновременном разложении категориальных распределений.
option = {
title: { text: 'Ежеквартальные продажи по регионам' },
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
legend: { data: ['Север', 'Юг', 'Восток', 'Запад'] },
xAxis: { type: 'value', name: 'Выручка (в $1 000)' },
yAxis: { type: 'category', data: ['Q1', 'Q2', 'Q3', 'Q4'] },
series: [
{ name: 'Север', type: 'bar', stack: 'Total', data: [85, 120, 95, 150] },
{ name: 'Юг', type: 'bar', stack: 'Total', data: [65, 90, 110, 130] },
{ name: 'Восток', type: 'bar', stack: 'Total', data: [45, 70, 85, 100] },
{ name: 'Запад', type: 'bar', stack: 'Total', data: [30, 50, 60, 75] }
]
};2. Линейная диаграмма с заливкой области (ежемесячный рост сайта)
Разработана для отслеживания хронологических изменений с плавной интерполяцией и чистой выравниванием сетки.
option = {
title: { text: 'Ежемесячные посещения', left: 'center' },
tooltip: { trigger: 'axis' },
grid: { left: 40, right: 20, top: 50, bottom: 30, containLabel: true },
xAxis: { type: 'category', data: ['Янв','Фев','Мар','Апр','Май','Июн'] },
yAxis: { type: 'value' },
series: [{
name: 'Посещения',
type: 'line',
smooth: true,
data: [820, 932, 901, 934, 1290, 1330],
areaStyle: { opacity: 0.3 }
}]
};3. Настроенный график области (яркие акценты)
Отличный пример гибкости стилизации, где цвета линий, конфигурации границ и прозрачность заливки можно мгновенно изменить.
option = {
title: { text: 'Ежемесячные посещения сайта (2026)' },
xAxis: { type: 'category', boundaryGap: false, data: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл'] },
yAxis: { type: 'value' },
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'line',
areaStyle: { color: '#ff6b6b' },
lineStyle: { color: '#e03131' },
itemStyle: { color: '#e03131' }
}]
};4. Интерактивная круговая диаграмма (состав трафика по источникам)
Классическая компоновка для расчета доли рынка или источников трафика, с чистым контейнером легенды внизу.
option = {
title: { text: 'Источник трафика сайта', left: 'center' },
tooltip: { trigger: 'item' },
legend: { bottom: 10 },
series: [
{
name: 'Источник доступа',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Поисковые системы' },
{ value: 735, name: 'Прямой' },
{ value: 580, name: 'Почта' },
{ value: 484, name: 'Объединённая реклама' },
{ value: 300, name: 'Видео-реклама' }
]
}
]
};5. Радарная диаграмма (сравнение архитектуры сервисной сетки)
Многофакторная структура графика, часто используемая для оценки технических возможностей, программных показателей или сложных критериев архитектуры, сравниваемых одновременно.
option = {
title: { text: 'Оценка возможностей сервисной сетки' },
tooltip: {},
radar: {
indicator: [
{ name: 'Пропускная способность (RPS)', max: 100 },
{ name: 'Устойчивость к сбоям', max: 100 },
{ name: 'Эффективность использования памяти', max: 100 },
{ name: 'Наблюдаемость', max: 100 },
{ name: 'Безопасность/TLS', max: 100 }
]
},
series: [{
name: 'Профили сервисов',
type: 'radar',
data: [
{ value: [85, 90, 55, 95, 80], name: 'Узел прокси Go', areaStyle: { opacity: 0.3 } },
{ value: [40, 75, 90, 60, 90], name: 'Устаревший Java-шлюз', areaStyle: { opacity: 0.1 } }
]
}]
};6. Диаграмма рассеяния (профиль метрики задержки вывода)
Отлично подходит для выявления выбросов, порогов размера нагрузки и узких мест приложений в распределённых инфраструктурах.
option = {
title: { text: 'Задержка вывода против размера нагрузки', left: 'center' },
tooltip: { trigger: 'item', formatter: function (p) { return 'Размер: ' + p.value[0] + ' КБ<br />Задержка: ' + p.value[1] + ' мс'; } },
xAxis: { name: 'Размер нагрузки (КБ)', type: 'value', splitLine: { lineStyle: { type: 'dashed' } } },
yAxis: { name: 'Задержка (мс)', type: 'value', splitLine: { lineStyle: { type: 'dashed' } } },
series: [{
type: 'scatter',
symbolSize: 12,
data: [
[120, 450], [240, 580], [50, 210], [512, 1100], [320, 720],
[180, 390], [450, 950], [90, 310], [600, 1340], [150, 410]
],
itemStyle: { color: '#aa00ff' }
}]
};7. Диаграмма солнечного луча (лицензирование многоуровневого кода)
Визуализируйте иерархические отношения с помощью концентрических колец. Наша платформа выступает в качестве органическогосоздатель диаграммдля упрощения сложных вложенных конфигураций данных, таких как эта.
option = {
title: { text: 'Состав лицензий кодовой базы', left: 'center' },
series: [{
type: 'sunburst',
radius: [0, '90%'],
data: [{
name: 'Открытый исходный код',
children: [
{ name: 'Свободный', children: [{ name: 'MIT', value: 55 }, { name: 'Apache 2.0', value: 30 }] },
{ name: 'Соавторство', children: [{ name: 'GPLv3', value: 12 }] }
]
}, {
name: 'Проприетарный',
children: [{ name: 'Коммерческий поставщик', value: 18 }]
}]
}]
};8. Диаграмма Санки (анализатор потока затрат инфраструктуры)
Отслеживайте сопоставление операционных ресурсов или финансовых переменных на разных этапах вычислений с помощью связей с весом узлов.
option = {
title: { text: 'Анализатор потока затрат инфраструктуры' },
tooltip: { trigger: 'item', triggerOn: 'mousemove' },
series: [{
type: 'sankey',
data: [
{ name: 'Общий бюджет' }, { name: 'Облако AWS' }, { name: 'Инструменты SaaS' },
{ name: 'Вычисления EC2' }, { name: 'Хранение RDS' }, { name: 'Мониторинг' }
],
links: [
{ source: 'Общий бюджет', target: 'Облако AWS', value: 8000 },
{ source: 'Общий бюджет', target: 'Инструменты SaaS', value: 2000 },
{ source: 'Облако AWS', target: 'Вычисления EC2', value: 5500 },
{ source: 'Облако AWS', target: 'Хранение RDS', value: 2500 },
{ source: 'Инструменты SaaS', target: 'Мониторинг', value: 2000 }
],
lineStyle: { color: 'source', curveness: 0.5 }
}]
};9. Тепловая карта (сетка скорости развертывания по часам)
Просто отслеживайте системную плотность, объемы развертывания или непрерывные сдвиги трафика по матрицам пользовательских временных интервалов.
option = {
title: { text: 'Скорость развертывания по часам', left: 'center' },
tooltip: { position: 'top' },
grid: { height: '50%', top: '15%' },
xAxis: { type: 'category', data: ['12:00', '4:00', '8:00', '12:00', '16:00', '20:00'], splitArea: { show: true } },
yAxis: { type: 'category', data: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'], splitArea: { show: true } },
visualMap: { min: 0, max: 30, type: 'continuous', orient: 'horizontal', left: 'center', bottom: '15%' },
series: [{
name: 'Развертывания',
type: 'heatmap',
data: [[0,0,5],[0,1,1],[0,2,0],[0,3,12],[0,4,18],[0,5,8],[1,3,15],[2,4,22],[3,3,30],[4,4,25],[5,0,2],[6,0,1]],
label: { show: true },
emphasis: { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)' } }
}]
};Раскройте потенциал автоматизации преобразования текста в диаграммы уже сегодня
Независимо от того, нужен ли вам создатель диаграммдля преобразования необработанных бизнес-метрик или централизованного холста для карт структурного проектирования, VPasCode оптимизирует ваши повседневные рабочие процессы. Прощайтесь с фрагментированными приложениями и хрупкими библиотеками визуализации.
Готовы превратить свои структуры данных в интерактивные визуальные панели управления?
Исследуйте полотно полностью, попробуйте эти шаблоны и протестируйте нашу производительность отрисовки бесплатно.
Запустите живой редактор VPasCode прямо сейчас →