Apache ECharts: Sankey colors

Question

I have the following chart options in my Angular application for a sankey chart:

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,
      },
    },
  ],
};

This is the current result:

But the goal is that on the first level each node should have another color and the levels underneath it (depth +1) should have the parent color but only with -10% color saturation.

Example:

score 2 · Accepted Answer · answered Nov 23 '20 at 20:32

Do you know how many levels will be in the resulting chart? If yes, just set color transform manually like in official example:

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 has no built-in color transform functions but you can take any library like TinyColor or Chroma.js and generate color with saturation.

If you need to make it automatically then just generate levels with predefined setup from dimensions of you data and set it into the chart with setOption.

Thank you for your answer! I updated my question with an example but I still dont figure out the main problem. If you copy/paste my update code in the ECharts Editor, you see that the first node with `depth: 0` is red. But in this case `Heinrich Campus > Containerburg` should have another color like `Heinrich Campus > Kranstrom`. — mrks, Nov 24 '20 at 16:22
I can't detect the problem. You published part of full config and is very complex thing to guess the missing parts. Could you make worked chart with the problem by jsfiddle without angular? — Sergey Fedorov, Nov 25 '20 at 16:06

Apache ECharts: Sankey colors

1 Answers1