javascriptechartssankey-diagram

How to add two data with the same name? Apache echarts sankey diagram


i am making a code based on the following sankey example.

option = {
  series: {
    type: 'sankey',
    layout: 'none',
    emphasis: {
      focus: 'adjacency'
    },
    data: [
      {
        name: 'a'
      },
      {
        name: 'b'
      },
      {
        name: 'a1'
      },
      {
        name: 'a2'
      },
      {
        name: 'b1'
      },
      {
        name: 'c'
      }
    ],
    links: [
      {
        source: 'a',
        target: 'a1',
        value: 5
      },
      {
        source: 'a',
        target: 'a2',
        value: 3
      },
      {
        source: 'b',
        target: 'b1',
        value: 8
      },
      {
        source: 'a',
        target: 'b1',
        value: 3
      },
      {
        source: 'b1',
        target: 'a1',
        value: 1
      },
      {
        source: 'b1',
        target: 'c',
        value: 2
      }
    ]
  }
};

Using that code, I have different elements specified in the "data" array. Specifically, I would like "a" and "a2" elements to be named "z" at the final image.

I can't just change the element name as

{
  name: 'z'
}

because this change the conection between elements.

I tried to specify the keys "label" and "id" in the object. I tried different combinations of something like this

{
  name: 'z',
  id: 'a',
  label: 'z'
}

but it doesn't work :(

Can you help me to get what i want please?


Solution

  • You can use the label formatter function. Here is an example:

    option = {
    ...
      label: {
        formatter: labelFormatter
      }
    ...
    }
    
    function labelFormatter(params) {
      const name = params.name;
      if (name === 'a' || name === 'a2') {
        return 'z';
      }
      return name;
    }