Skip to content

Vis echarts builder

Конструктор Графиков (ECharts)

Конструктор чартов поверх Apache ECharts. Один плагин вместо десятка отдельных: выбираете тип графика, собираете чарт из блоков, при необходимости донастраиваете через JSON.

1. Когда использовать

Сценарий Что выбрать
Простой типовой график (одна метрика, ось времени) стандартный тип визуализации (Time-series Line/Bar/Pie) — быстрее
Несколько серий разных типов в одном чарте (line + bar + scatter) Конструктор ECharts, Chart type = Custom
Нужны тонкие настройки ECharts (formatter, labelLine, axisPointer, ...) Конструктор ECharts + Advanced JSON
Нужен radar / gauge / funnel / themeRiver / candlestick в едином UI Конструктор ECharts

2. Быстрый старт

  1. Создать график → в разделе Популярно выберите Конструктор ECharts или ECharts Builder.
  2. На панели слева:
    1. Выберите датасет.
    2. В Chart type выберите тип: line / bar / pie / custom.
    3. В Chart Blocks включите нужные блоки (xAxis / yAxis / series / legend / tooltip / ...).
  3. На холсте Chart Preview:
    1. Нажмите + Add series — выберите метрику.
    2. Нажмите + Add xAxis / yAxis — выберите колонку.
  4. Обновить график — чарт построится.

3. Концепции

  • Chart type — глобальный тип графика (line / bar / pie / custom). Определяет, какие блоки доступны и какой transformer строит базовую опцию.
  • Block — структурный элемент ECharts (xAxis, yAxis, series, legend, tooltip, grid, dataZoom, visualMap, title, toolbox, animation, color, radar, parallel, singleAxis, dimensions).
  • Series entry — одна линия / столбец / сектор. Хранит метрику и per-series настройки (тип, цвет, stack, ...).
  • Advanced JSON — частичный override итоговой ECharts option. Накладывается поверх блоков по принципу deep-merge.

Принцип: блоки — источник истины, JSON — донастройка.

4. Поддерживаемые типы серий

«Зелёная зона» — типы, для которых builder автоматически собирает данные:

Тип Coord Когда выбирать
line cartesian2d временные ряды, тренды
bar cartesian2d категориальные сравнения
scatter, effectScatter cartesian2d корреляции, точечные распределения
pie, funnel none доли от целого, воронки
gauge none KPI / прогресс одной метрики
radar radar многомерное сравнение (по N метрикам)
candlestick cartesian2d OHLC (нужно ровно 4 метрики: open/close/low/high)
themeRiver single временная категория-поток
heatmap (временно), boxplot (временно), parallel (временно) — пока используйте standalone-плагины

5. Chart Blocks

Слева от Chart Preview — список блоков, которые включены в текущий чарт. Список меняется в зависимости от Chart type / series type.

Блок ECharts Назначение
xAxis #xAxis категориальная / временная / числовая ось X
yAxis #yAxis числовая ось Y; для heatmap — категориальная Y
series #series конфигурация ряда (тип, стиль, метрика)
dimensions — группировка для pie (вместо xAxis)
legend #legend легенда
tooltip #tooltip подсказка при ховере
grid #grid отступы canvas
dataZoom #dataZoom скролл / зум по оси
visualMap #visualMap цветовая шкала (heatmap, value-based color)
title #title заголовок / подзаголовок
toolbox #toolbox панель инструментов (saveAsImage, dataView, ...)
animation #animation анимация перехода
color #color цветовая палитра
radar #radar shape / splitNumber / startAngle radar-grid
parallel #parallel layout parallel-coordinates
singleAxis #singleAxis ось для themeRiver

Добавление / редактирование блока

  • + Add <block> — открывает модалку с настройками.
  • Шестерёнка на блоке — редактирование.
  • Корзина — удаление.

Singleton-блоки (legend / tooltip / title / ...) могут быть только в одном экземпляре. xAxis / yAxis / series / dimensions можно добавлять несколько раз.

Series modal — поля

Поле Описание
Metric выбор метрики (Saved / Simple / Custom SQL)
Series type echart-тип ряда. При Chart type = custom — обязателен, по дефолту line
Row limit общее ограничение строк query (синхронизируется со всеми сериями)
Series settings панель параметров для текущего типа. Показывается для line / bar / pie. Для остальных типов настраивайте через Advanced JSON

6. Chart type = Custom

Используйте, когда нужно смешать несколько типов серий в одном чарте (line + bar, bar + scatter, pie + gauge и т.п.) или взять серию, которой нет среди базовых трёх (radar, funnel, gauge, candlestick, ...).

  • Поле Series type в Series modal становится обязательным (*).
  • Доступны все блоки, включая companion (radar / parallel / singleAxis).
  • Если серии относятся к одной coord-семье (например все cartesian) — builder автоматически выберет правильный transformer.
  • Если выбран нетипичный тип (radar) — данные пойдут через адаптер 2d → multi-dim, companion radar.indicator сгенерируется из имён метрик.

7. Advanced JSON Editor

Откройте на боковой панели Расширенный JSON....

Что можно

  • Любое поле ECharts: title.subtext, series[i].emphasis.lineStyle.width, tooltip.formatter, legend.itemGap, ...
  • Перетереть конкретный элемент массива по индексу: {"series": [{}, {"smooth": true}]} — изменяет только вторую серию.
  • Удалить элемент: {"series": [null]} — удалит первую серию.

Стратегия merge

  • Объекты — рекурсивный merge per-key.
  • Entity-массивы (series, xAxis, yAxis, dataset, ...) — merge по индексу (length из workspace заполняется автоматически).
  • Data-массивы (series[i].data, xAxis[i].data, ...) — полная замена.
  • null в любом месте — удалить ключ / элемент.

JS-выражения

Строки с префиксом @js: компилируются в функции:

{
  "tooltip": {
    "formatter": "@js: (params) => `${params.name}: ${params.value.toFixed(2)}`"
  },
  "series": [
    { "label": { "show": true, "formatter": "@js: ({data}) => data.value + '$'" } }
  ]
}

Используйте только для полей, где ECharts принимает функцию (formatter, labelFormatter, tooltip.formatter, visualMap.formatter, ...).

Пресеты

В шапке редактора:

  • Empty — пустой шаблон {}.
  • From blocks — стянуть текущее состояние workspace в JSON для редактирования.
  • Default template — пример со всеми частыми ключами.

Сохранение

  • Apply — применить локально (не сохраняет formData до Update chart).
  • Save — записать override в formData и закрыть.
  • Clear — очистить override.

Если в JSON есть синтаксическая ошибка / unsupported series.type — кнопка Apply / Save заблокирована, ошибка показывается inline.

8. Адаптация при смене типа

При смене Chart type / Series type некоторые блоки могут стать unsupported для нового типа (например, xAxis для pie). Builder:

  1. Покажет жёлтый notice «Some blocks are unused by series type X».
  2. Подсветит лишние блоки серым с подсказкой.
  3. Предложит Adapt — кнопка удалит несовместимые блоки одним кликом.

Update chart не блокируется (warnings — не blocking). Но настоятельно рекомендуется адаптировать, иначе echarts может ругаться warning'ами и рисовать «лишние» элементы.

9. Валидация

Слева под Chart Blocks отображается список проблем:

  • Blocking (красный) — мешают построить чарт (x_axis_required, at_least_one_metric_required, candlestick_requires_4_series, ...). Update chart заблокирован.
  • Warning (жёлтый) — не блокируют (block_type_unsupported_for_kind, heatmap_temporarily_unsupported, ...). Чарт построится, но может выглядеть некорректно.

При blocking-ошибке чарт показывает subtext в заголовке с её причиной — чтобы понятно было, почему canvas пустой.

10. Частые сценарии

Стек из двух bar-серий

  1. Chart type = bar, добавьте две series.
  2. В Series modal обеих включите Stacked и задайте одинаковый Stack group (например total).

Mixed line + bar

  1. Chart type = custom.
  2. Добавьте 1 series, Series type = bar.
  3. Добавьте 2-ю series, Series type = line.
  4. Включите оба блока xAxis / yAxis.

Donut вместо Pie

  1. Chart type = pie, добавьте series + dimensions.
  2. В Series modal задайте Inner radius = 50.

Radar с N метриками

  1. Chart type = custom.
  2. Добавьте N series, у каждой Series type = radar.
  3. Блок radar добавьте сам — настроите shape (polygon / circle), splitNumber.

Подсветка макс. значения tooltip-ом

В Advanced JSON:

{
  "tooltip": {
    "trigger": "axis",
    "formatter": "@js: (p) => p.map(x => `${x.seriesName}: ${x.value}`).join('<br/>')"
  }
}