Apache ECharts：桑基色

Question

我的 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% 的顏色飽和度。

例子：

Answer 1

您知道結果圖表中有多少個級別嗎？ 如果是，只需像官方示例中那樣手動設置顏色變換：

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將其設置到圖表中。