0

我想使用 Apache echarts Sankey 图表对自身内部的节点进行分组，并为这些分组的节点提供标签，如本 sankeychart示例中所示。“Tree1”和“Tree2”也是白色节点和较大字体的标签。我添加它们以显示我想要的图表。我希望它们所在的位置完全一样，但是当然这个顺序可能会不时改变，当我要分组的其他节点来时，节点位置可能会混淆。我可以通过按将节点添加到 json 的顺序显示节点来做我想做的事，我可以通过将layoutIterations参数设置为 0 来做到这一点，但是当我这样做时，会出现一个类似 this sankeychart2的图表已创建，但这不是我想要的所有节点都在顶部的图表。实际上，我想将“Tree1”和“Tree2”下面的节点作为两个单独的树，可能是两个单独的桑基图。我希望这两个树的共同根是“风险”节点，如示例所示。我怎样才能做这样的分组？我希望我能够解释我的问题。我正在尝试使用 angular 和 ngx-echarts 指令制作此图表。

这是我的数据


{"nodes":[{"name":"Risk","value":0.8,"tooltip":{"trigger":"none"},"itemStyle":{"color":"#d1d1d1"}},{"name":"Pumped\nHead","value":0.8,"tooltip":{"trigger":"none"},"itemStyle":{"color":"#d1d1d1"}},{"name":"Tree1","value":1,"tooltip":{"trigger":"none"},"itemStyle":{"color":"white"},"label":{"fontWeight":"bold","fontSize":15}},{"name":"SO","value":0.8,"tooltip":{"trigger":"none"},"itemStyle":{"color":"#d1d1d1"}},{"name":"G","value":0.8,"tooltip":{"trigger":"none"},"itemStyle":{"color":"#d1d1d1"}},{"name":"LO","value":0.8,"tooltip":{"trigger":"none"},"itemStyle":{"color":"#d1d1d1"}},{"name":"BC","value":0.8,"tooltip":{"trigger":"none"},"itemStyle":{"color":"#d1d1d1"}},{"name":"L","value":0.8,"tooltip":{"trigger":"none"},"itemStyle":{"color":"#d1d1d1"}},{"name":"AW","value":0.8,"tooltip":{"trigger":"none"},"itemStyle":{"color":"#d1d1d1"}},{"name":"Solar","value":0.8,"tooltip":{"trigger":"none"},"itemStyle":{"color":"#d1d1d1"}},{"name":"Wave","value":0.8,"tooltip":{"trigger":"none"},"itemStyle":{"color":"#d1d1d1"}},{"name":"OL","value":0.8,"tooltip":{"trigger":"none"},"itemStyle":{"color":"#d1d1d1"}},{"name":"N","value":0.8,"tooltip":{"trigger":"none"},"itemStyle":{"color":"#d1d1d1"}},{"name":"H","value":0.8,"tooltip":{"trigger":"none"},"itemStyle":{"color":"#d1d1d1"}},{"name":"MA","value":0.8,"tooltip":{"trigger":"none"},"itemStyle":{"color":"#d1d1d1"}},{"name":"DA","value":0.8,"tooltip":{"trigger":"none"},"itemStyle":{"color":"#d1d1d1"}},{"name":"NU","value":0.8,"tooltip":{"trigger":"none"},"itemStyle":{"color":"#d1d1d1"}},{"name":"Tidal","value":0.8,"tooltip":{"trigger":"none"},"itemStyle":{"color":"#d1d1d1"}},{"name":"Wind","value":0.8,"tooltip":{"trigger":"none"},"itemStyle":{"color":"#d1d1d1"}},{"name":"Coal\nreserves","value":0.8,"tooltip":{"trigger":"none"},"itemStyle":{"color":"#d1d1d1"}},{"name":"Tree2","value":1,"tooltip":{"trigger":"none"},"itemStyle":{"color":"white"},"label":{"fontWeight":"bold","fontSize":15}},{"name":"IA","value":0.8,"tooltip":{"trigger":"none"},"itemStyle":{"color":"#d1d1d1"}},{"name":"OI","value":0.8,"tooltip":{"trigger":"none"},"itemStyle":{"color":"#d1d1d1"}},{"name":"O","value":0.8,"tooltip":{"trigger":"none"},"itemStyle":{"color":"#d1d1d1"}},{"name":"RT","value":0.8,"tooltip":{"trigger":"none"},"itemStyle":{"color":"#d1d1d1"}},{"name":"AGR","value":0.8,"tooltip":{"trigger":"none"},"itemStyle":{"color":"#d1d1d1"}}],"links":[{"source":"Pumped\nHead","target":"Risk","lineStyle":{"color":"#ffc800"},"value":0.45},{"source":"Tree1","target":"Solar","lineStyle":{"color":"white"},"value":0.5,"tooltip":{"trigger":"none"}},{"source":"SO","target":"Solar","lineStyle":{"color":"#ffc800"},"value":0.43},{"source":"G","target":"Solar","lineStyle":{"color":"#00ff00"},"value":0.11},{"source":"LO","target":"Solar","lineStyle":{"color":"black"},"value":0,"tooltip":{"trigger":"none"}},{"source":"BC","target":"Tidal","lineStyle":{"color":"#00ff00"},"value":0.16},{"source":"L","target":"Tidal","lineStyle":{"color":"#ffff00"},"value":0.25},{"source":"AW","target":"Tidal","lineStyle":{"color":"#ff0000"},"value":0.78},{"source":"Solar","target":"Tidal","lineStyle":{"color":"#00ff00"},"value":0.04066363389922384},{"source":"Wave","target":"Tidal","lineStyle":{"color":"#ff0000"},"value":0.65},{"source":"OL","target":"Wave","lineStyle":{"color":"#ffc800"},"value":0.45},{"source":"N","target":"Wave","lineStyle":{"color":"#ffff00"},"value":0.32},{"source":"H","target":"Wave","lineStyle":{"color":"#ff0000"},"value":0.61},{"source":"MA","target":"Wind","lineStyle":{"color":"#00ff00"},"value":0.04},{"source":"DA","target":"Wind","lineStyle":{"color":"black"},"value":0,"tooltip":{"trigger":"none"}},{"source":"NU","target":"Wind","lineStyle":{"color":"#00ff00"},"value":0.02},{"source":"Tidal","target":"Pumped\nHead","lineStyle":{"color":"#00ff00"},"value":0.15},{"source":"Wind","target":"Pumped\nHead","lineStyle":{"color":"#ffff00"},"value":0.28},{"source":"Coal\nreserves","target":"Risk","lineStyle":{"color":"#ffc800"},"value":0.47},{"source":"Tree2","target":"Coal\nreserves","lineStyle":{"color":"white"},"value":0.5,"tooltip":{"trigger":"none"}},{"source":"IA","target":"Coal\nreserves","lineStyle":{"color":"#ffff00"},"value":0.27},{"source":"OI","target":"Coal\nreserves","lineStyle":{"color":"#ffff00"},"value":0.22},{"source":"O","target":"Coal\nreserves","lineStyle":{"color":"#00ff00"},"value":0.08},{"source":"RT","target":"Coal\nreserves","lineStyle":{"color":"black"},"value":0,"tooltip":{"trigger":"none"}},{"source":"AGR","target":"Coal\nreserves","lineStyle":{"color":"#ffff00"},"value":0.33}]}

这些是选项

{
        title: {
          text: "Sankey Chart Example",
        },
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove|click",
        },

        animation: true,
        series: [
          {
            type: 'sankey',
            nodeAlign: 'left',
            data: this.json.nodes,
            links: this.json.links,
            nodeWidth: 100,
            layoutIterations:0,
            label: {
              color: 'black',
              position: 'inside',
            },
            lineStyle: {
              curveness: 0.2,
              opacity: 0.6,
            },

          }
        ]
      }

谢谢。

4

0 回答 0