logologo
Úvod
Manuál
Vývoj
Pluginy
API
English
简体中文
日本語
한국어
Deutsch
Français
Español
Português
Русский
Italiano
Türkçe
Українська
Tiếng Việt
Bahasa Indonesia
ไทย
Polski
Nederlands
Čeština
العربية
עברית
हिन्दी
Svenska
Úvod
Manuál
Vývoj
Pluginy
API
logologo
Přehled
Rychlý start

Představení funkcí

Datový dotaz
Možnosti grafu
Náhled a uložení
Použití kontextových proměnných prostředí
Filtry stránky a propojení

Pokročilé

Dotazování dat v SQL režimu
Vlastní konfigurace grafu
Vlastní interaktivní události
Časté dotazy
Osvědčené postupy
Previous PageDotazování dat v SQL režimu
Next PageVlastní interaktivní události
TIP

Tento dokument byl přeložen umělou inteligencí. V případě nepřesností se prosím obraťte na anglickou verzi

#Vlastní konfigurace grafu

V režimu Vlastní konfigurace můžete grafy nastavit psaním JS kódu v editoru. Na základě ctx.data vrátíte kompletní option pro ECharts. To je ideální pro slučování více datových řad, komplexní popisky a dynamické styly. Teoreticky jsou podporovány všechny funkce ECharts a všechny typy grafů.

clipboard-image-1761524637

#Datový kontext

  • ctx.data.objects: pole objektů (každý řádek jako objekt)
  • ctx.data.rows: dvourozměrné pole (včetně záhlaví)
  • ctx.data.columns: dvourozměrné pole seskupené podle sloupců

Doporučené použití: Slučte data do dataset.source. Podrobné informace o použití naleznete v dokumentaci ECharts:

Dataset

Osy

Příklady

Podívejme se nejprve na nejjednodušší příklad:

#Příklad 1: Sloupcový graf měsíčního objemu objednávek

20251027082816

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

#Příklad 2: Graf trendu prodeje

clipboard-image-1761525188

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"
      }
    }
  ]
}

Doporučení:

  • Dodržujte styl čistých funkcí: generujte option pouze z ctx.data a vyhněte se vedlejším efektům.
  • Změny názvů sloupců v dotazu ovlivňují indexování; standardizujte názvy a potvrďte je v "Zobrazit data" před úpravou kódu.
  • U velkých datových sad se vyhněte složitým synchronním výpočtům v JS; v případě potřeby agregujte data již ve fázi dotazu.

#Další příklady

Další příklady použití naleznete v demo aplikaci NocoBase.

Můžete si také prohlédnout oficiální příklady ECharts, vybrat si požadovaný efekt grafu a následně se inspirovat a zkopírovat JS konfigurační kód.

#Náhled a uložení

20251027083938

  • Klikněte na „Náhled“ vpravo nebo dole pro obnovení grafu a ověření obsahu JS konfigurace.
  • Kliknutím na „Uložit“ uložíte aktuální JS konfiguraci do databáze.
  • Kliknutím na „Zrušit“ se vrátíte k naposledy uloženému stavu.