Is it possible to map multiple categories of a VisualMap to multiple data values in a sunburst diagramm?

Question

is it possible with a "piecewise" VisualMap (Apache E-Charts), to map multiple categories to multiple data values in a sunburst diagram?

As of now and as I understand, you can have a piecewise VisualMap and you map one category to exactly one data value.

I'm looking for a way to have the following:

Theme	Value
TH-A	CAT-1, CAT-2
TH-B	CAT-2, CAT-3
TH-C	CAT-1, CAT-3
TH-D	CAT-1, CAT-2
TH-E	CAT-3

Here is a small example: https://jsfiddle.net/xv4so7ne/14/

So if I select (as examples):

• CAT-1 the sunburst diagram should highlight TH-A, TH-C, TH-D
• CAT-1, CAT-3 the sunburst diagram should highlight TH-A, TH-B, TH-C, TH-E
• CAT-3 the sunburst diagram should highlight TH-B, TH-C, TH-E

Is this possible with this diagramy type, to select multiple categories and highlight multiple pieces?

At the moment we have values: [value] to map the VisualMap. For this I'm searching for values: [[CAT-1,CAT-3]] to get correctly mapped.

Best, Ronny

Answer 1

After clarification from your comment I do understand what you want to achieve and this is not possible using a visaulMap.

But you can do so by using an invisable helper series which will be used to populate the legend and the legendselectchanged event to modify the sunburst data via setOption.

Example:

option = {
  legend: {
    show: true,
    itemStyle: {color: 'lightblue'},
    data: [{name: 'cat 1'}, {name: 'cat 2'}, {name: 'cat 3'}],
  },
  series: [
    {
      type: 'sunburst',
      data: data,
    },
    {
      type: 'pie',
      radius: [0,0],
      silent: true,
      data: [{name: 'cat 1'}, {name: 'cat 2'}, {name: 'cat 3'}]
    },
  ]
};


myChart.on('legendselectchanged', function(params) {
  const selected = params.selected;
  markData(selected);
})


function markData(selected) {
  let nextLevel = data;
  while (nextLevel.length !== 0) {
    const currentLevel = nextLevel;
    nextLevel = [];
    for (const item of currentLevel) {
      if (selected[item.cat]) {
        item['itemStyle'] = {color: 'red'};
      } else {
        item['itemStyle'] = undefined;
      }
      
      if (item.children) {
        nextLevel = nextLevel.concat(item.children);
      }
    }
  }
  
  myChart.setOption({series: [{data: data}]})
}


var data = [
  {
    name: 'Grandpa',
    cat: 'cat 1',
    children: [
      {
        name: 'Uncle Leo',
        cat: 'cat 3',
        value: 15,
        children: [
          {
            name: 'Cousin Jack',
            cat: 'cat 1',
            value: 2
          },
          {
            name: 'Cousin Mary',
            cat: 'cat 2',
            value: 5,
            children: [
              {
                name: 'Jackson',
                cat: 'cat 2',
                value: 2
              }
            ]
          },
          {
            name: 'Cousin Ben',
            cat: 'cat 1',
            value: 4
          }
        ]
      },
      {
        name: 'Father',
        cat: 'cat 2',
        value: 10,
        children: [
          {
            name: 'Me',
            cat: 'cat 3',
            value: 5
          },
          {
            name: 'Brother Peter',
            cat: 'cat 1',
            value: 1
          }
        ]
      }
    ]
  },
  {
    name: 'Nancy',
    cat: 'cat 2',
    children: [
      {
        name: 'Uncle Nike',
        cat: 'cat 3',
        children: [
          {
            name: 'Cousin Betty',
            cat: 'cat 2',
            value: 1
          },
          {
            name: 'Cousin Jenny',
            cat: 'cat 3',
            value: 2
          }
        ]
      }
    ]
  }
];

Note, that you can achieve similar effects using a helper visualMap (with seriesIndex set to one that is not present) and the datarangeselected event if you want to use the legend.