Apache ECharts：Sankey 颜色

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

你知道结果图表中有多少个级别吗？如果是，只需手动设置颜色变换，如 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 没有内置的颜色转换函数，但您可以使用任何像 TinyColor or Chroma.js 这样的库来生成具有饱和度的颜色。

如果您需要自动生成它，则只需根据您的数据维度使用预定义设置生成 levels，然后使用 setOption.

将其设置到图表中

Apache ECharts：Sankey 颜色

Apache ECharts: Sankey colors

javascript

angular

echarts

apache-echarts