1

サンキー チャートの Angular アプリケーションには、次のチャート オプションがあります。

this.chartOptions = {
  color: ["#922752", "#ff9822", "#4390e1", "#53bcbc"],
  tooltip: {
    backgroundColor: "#ffffff",
    borderWidth: 1,
    formatter: `<b>{b}</b><br/>{c} ${this.unit}`,
    padding: 8,
    textStyle: { color: "#212529" },
    trigger: "item",
    triggerOn: "mousemove",
  },
  series: [
    {
      type: "sankey",
      left: 0,
      top: 0,
      bottom: 0,
      nodeWidth: 10,
      data: this.seriesData,
      draggable: false,
      label: {
        fontWeight: "bold",
        formatter: "{b}",
      },
      links: this.seriesLinks,
      focusNodeAdjacency: "allEdges",
      itemStyle: {
        borderWidth: 0,
      },
      lineStyle: {
        color: "source",
        curveness: 0.5,
      },
    },
  ],
};

これは現在の結果です:

サンキー チャート カレント

しかし、目標は、最初のレベルで各ノードに別の色を持たせ、その下のレベル (深さ +1) に親色を持たせる必要がありますが、彩度は -10% のみにすることです。

例：

サンキー チャートの目標

4

1 に答える 1

2

結果のチャートにはいくつのレベルがあるか知っていますか? はいの場合は、公式の例のように手動で色変換を設定してください:

levels: [
  {
    depth: 0,
    itemStyle: {
      color: "#fbb4ae",
    },
    lineStyle: {
      color: "source",
      opacity: 0.8,
    },
  },
  {
    depth: 1,
    itemStyle: {
      color: "source", // <-- here you can say: "get color from upper level and set opacity"
      opacity: 0.6,
    },
    lineStyle: {
      color: "source",
      opacity: 0.6,
    },
  },
  {
    depth: 2,
    itemStyle: {
      color: "source",
      opacity: 0.4,
    },
    lineStyle: {
      color: "source",
      opacity: 0.4,
    },
  },
  {
    depth: 3,
    itemStyle: {
      color: "source",
    },
    lineStyle: {
      color: "source",
      opacity: 0.2,
    },
  },
];

Echarts には組み込みの色変換関数はありませんが、TinyColorやChroma.jsなどの任意のライブラリを使用して、彩度のある色を生成できます。

自動的に作成する必要がある場合はlevels、データのディメンションから定義済みの設定で生成し、setOptionでチャートに設定します。

于 2020-11-23T20:32:37.147 に答える