#Настройка диаграмм в пользовательском режиме

В пользовательском режиме вы можете настраивать диаграммы, написав JavaScript-код в редакторе. На основе ctx.data вы возвращаете полный объект option ECharts. Это подходит для объединения нескольких серий данных, создания сложных всплывающих подсказок и динамических стилей. Теоретически поддерживаются все функции и типы диаграмм ECharts.

#Контекст данных

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

Рекомендуемое использование: Объединяйте данные в dataset.source. Подробное описание использования вы найдете в документации ECharts:

Набор данных (Dataset)

Оси координат

Примеры

Давайте рассмотрим самый простой пример:

#Пример 1: Столбчатая диаграмма количества заказов по месяцам

return {
  dataset: { source: ctx.data.objects || [] },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [
    {
      type: 'bar',
      showSymbol: false,
    },
  ],
}

#Пример 2: Диаграмма тренда продаж

return {
  dataset: {
    source: ctx.data.objects.reverse()
  },
  title: {
    text: "Monthly Sales Trend",
    subtext: "Last 12 Months",
    left: "center"
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross"
    }
  },
  legend: {
    data: ["Revenue", "Order Count", "Avg Order Value"],
    bottom: 0
  },
  grid: {
    left: "5%",
    right: "5%",
    bottom: "60",
    top: "80",
    containLabel: true
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    axisLabel: {
      rotate: 45
    }
  },
  yAxis: [
    {
      type: "value",
      name: "Amount(¥)",
      position: "left",
      axisLabel: {
        formatter: (value) => {
          return (value/10000).toFixed(0) + '0k';
        }
      }
    },
    {
      type: "value",
      name: "Order Count",
      position: "right"
    }
  ],
  series: [
    {
      name: "Revenue",
      type: "line",
      smooth: true,
      encode: {
        x: "month",
        y: "monthly_revenue"
      },
      areaStyle: {
        opacity: 0.3
      },
      itemStyle: {
        color: "#5470c6"
      }
    },
    {
      name: "Order Count",
      type: "bar",
      yAxisIndex: 1,
      encode: {
        x: "month",
        y: "order_count"
      },
      itemStyle: {
        color: "#91cc75",
        opacity: 0.6
      }
    },
    {
      name: "Avg Order Value",
      type: "line",
      encode: {
        x: "month",
        y: "avg_order_value"
      },
      itemStyle: {
        color: "#fac858"
      },
      lineStyle: {
        type: "dashed"
      }
    }
  ]
}

Рекомендации:

• Соблюдайте стиль чистых функций: генерируйте option только на основе ctx.data и избегайте побочных эффектов.
• Изменения в именах столбцов запроса влияют на индексацию; стандартизируйте имена и подтвердите их в разделе «Просмотр данных» перед изменением кода.
• При больших объемах данных избегайте сложных синхронных вычислений в JS; при необходимости выполняйте агрегацию на этапе запроса.

#Дополнительные примеры

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

Вы также можете просмотреть официальные примеры ECharts, чтобы найти желаемый эффект диаграммы, а затем использовать и скопировать соответствующий JS-код конфигурации.

#Предварительный просмотр и сохранение

• Нажмите «Предварительный просмотр» справа или внизу, чтобы обновить диаграмму и проверить конфигурацию JS.
• Нажмите «Сохранить», чтобы сохранить текущую конфигурацию JS в базу данных.
• Нажмите «Отмена», чтобы вернуться к последнему сохраненному состоянию.