javascript - Apache ECharts：桑基色

Question

我的 Angular 应用程序中有以下图表选项用于 sankey 图表：

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将其设置到图表中。