# Параметры диаграмм

Настройте способ отображения диаграмм. Поддерживаются два режима: Basic (визуальный) и Custom (JS-настройка). Режим Basic отлично подходит для быстрого сопоставления и использования стандартных свойств; Custom предназначен для сложных сценариев и расширенной настройки.

## Структура панели

![clipboard-image-1761473695](https://static-docs.nocobase.com/clipboard-image-1761473695.png)

> Совет: Для более удобной настройки текущего содержимого вы можете сначала свернуть другие панели.

В верхней части находится панель действий.
Выбор режима:
- Basic: Визуальная настройка. Выберите тип и выполните сопоставление полей; общие свойства можно настроить с помощью переключателей.
- Custom: Напишите JS-код в редакторе, который возвращает объект `option` ECharts.

## Режим Basic

![20251026190615](https://static-docs.nocobase.com/20251026190615.png)

### Выбор типа диаграммы
- Поддерживаются: линейные, с областями, столбчатые, гистограммы, круговые, кольцевые, воронкообразные, точечные диаграммы и другие.
- Требуемые поля могут отличаться для разных типов диаграмм. Сначала проверьте имена и типы столбцов в разделе «Запрос данных → Просмотр данных».

### Сопоставление полей
- Линейные/с областями/столбчатые/гистограммы:
  - `xField`: измерение (например, дата, категория, регион)
  - `yField`: показатель (агрегированное числовое значение)
  - `seriesField` (необязательно): группировка серий (для нескольких линий/групп столбцов)
- Круговые/кольцевые:
  - `Category`: категориальное измерение
  - `Value`: показатель
- Воронкообразные:
  - `Category`: этап/категория
  - `Value`: значение (обычно количество или процент)
- Точечные:
  - `xField`, `yField`: два показателя или измерения для осей

> Дополнительные параметры настройки диаграмм вы можете найти в документации ECharts: [Оси](https://echarts.apache.org/handbook/en/concepts/axis) и [Примеры](https://echarts.apache.org/examples/en/index.html)

**Обратите внимание:**
- После изменения измерений или показателей обязательно перепроверьте сопоставление, чтобы избежать пустых или некорректно отображающихся диаграмм.
- Для круговых/кольцевых и воронкообразных диаграмм обязательно укажите комбинацию «категория + значение».

### Общие свойства

![20251026191332](https://static-docs.nocobase.com/20251026191332.png)

- Накопление, сглаживание (для линейных/с областями)
- Отображение меток, всплывающие подсказки (tooltip), легенда (legend)
- Поворот меток осей, разделительные линии
- Радиус и внутренний радиус для круговых/кольцевых диаграмм, порядок сортировки для воронкообразных.

**Рекомендации:**
- Для временных рядов используйте линейные диаграммы или диаграммы с областями, умеренно применяя сглаживание; для сравнения больших категорий используйте столбчатые диаграммы или гистограммы.
- При большом объеме данных не включайте все метки, чтобы избежать их наложения.

## Режим Custom

Этот режим позволяет вернуть полный объект `option` ECharts и подходит для расширенной настройки, такой как объединение нескольких серий, сложные всплывающие подсказки и динамические стили. Рекомендуемый подход: консолидируйте данные в `dataset.source`. Подробности см. в документации ECharts: [Dataset](https://echarts.apache.org/handbook/en/concepts/dataset/#map-row-or-column-of-dataset-to-series)

![20251026191728](https://static-docs.nocobase.com/20251026191728.png)

### Контекст данных
- `ctx.data.objects`: массив объектов (каждая строка как объект, рекомендуется)
- `ctx.data.rows`: двумерный массив (с заголовком)
- `ctx.data.columns`: двумерный массив, сгруппированный по столбцам

### Пример: линейная диаграмма ежемесячных заказов
```js
return {
  dataset: { source: ctx.data.objects || [] },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [
    {
      type: 'line',
      smooth: true,
      showSymbol: false,
    },
  ],
}
```

### Предпросмотр и сохранение
- В режиме Custom после внесения изменений вы можете нажать кнопку «Предпросмотр» справа, чтобы обновить предварительный просмотр диаграммы.
- В нижней части нажмите «Сохранить», чтобы применить и сохранить настройки; нажмите «Отмена», чтобы отменить все изменения, сделанные в этот раз.

![20251026192816](https://static-docs.nocobase.com/20251026192816.png)

> [!TIP]
> Дополнительную информацию о параметрах диаграмм см. в разделе [Расширенное использование — Настройка диаграмм](#).