#Configuration de graphique personnalisée

En mode personnalisé, vous pouvez configurer des graphiques en écrivant du code JS dans l'éditeur. Basé sur ctx.data, cela renvoie une option ECharts complète. Cette approche est idéale pour fusionner plusieurs séries, gérer des info-bulles complexes et appliquer des styles dynamiques. En théorie, toutes les fonctionnalités et tous les types de graphiques ECharts sont pris en charge.

#Contexte des données

• ctx.data.objects : tableau d'objets (chaque ligne est un objet)
• ctx.data.rows : tableau 2D (inclut l'en-tête)
• ctx.data.columns : tableau 2D regroupé par colonnes

Utilisation recommandée : Consolidez les données dans dataset.source. Pour une utilisation détaillée, veuillez consulter la documentation ECharts :

Jeu de données

Axes

Exemples

Commençons par un exemple simple.

#Exemple 1 : Graphique à barres des commandes mensuelles

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

#Exemple 2 : Graphique de tendance des ventes

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

Recommandations :

• Adoptez un style de fonction pure : générez l'option uniquement à partir de ctx.data et évitez les effets de bord.
• Les modifications des noms de colonnes de requête affectent l'indexation ; standardisez les noms et confirmez-les dans "Afficher les données" avant de modifier le code.
• Pour les grands ensembles de données, évitez les calculs synchrones complexes en JS ; effectuez l'agrégation pendant la phase de requête si nécessaire.

#Plus d'exemples

Pour plus d'exemples d'utilisation, vous pouvez consulter l'application de démonstration NocoBase.

Vous pouvez également parcourir les exemples officiels d'ECharts pour trouver l'effet de graphique souhaité, puis vous référer et copier le code de configuration JS.

#Prévisualiser et enregistrer

• Cliquez sur "Prévisualiser" à droite ou en bas pour rafraîchir le graphique et valider la configuration JS.
• Cliquez sur "Enregistrer" pour sauvegarder la configuration JS actuelle dans la base de données.
• Cliquez sur "Annuler" pour revenir à l'état précédemment enregistré.