Echarts pie drilldown with animation

Question

I have a pie chart that uses dataset, dimensions and encode (not data embedded in the series). On clicking a series in the chart, I requery the database to get drilldown data where the parent is the value of the series clicked on. This then replaceMerge the dataset and a new pie chart is drawn.

I would like to animate this drilldown in a fashion similar to what Echarts Examples shows (Drilldown Example). But I cannot figure out how to associate the new series with the parent series that was clicked on. Without this association, Echarts simply animates the entire graph without the effect of "drilling in", making the animation pointless as it doesn't communicate anything.

The documentation refers to encode.itemGroupId but it is unclear what I should set this to. Should all the series in the drilldown data have the same value in the field specified by encode.itemGroupId? Makes sense, but what ties that to the parent series that was clicked on? The parent would have a different value, unless it is matching it up with another field (e.g. id instead of itemGroupId). The documentation doesn't explain.

My code (and data) is far too complex and modularized for multiple component use to share here, let me try to describe and example of what I'm doing. Let's imagine that my top level data are continents, and when you click on a continent, the dataset is replaced with new data showing countries within that continent. And when you click on one of the countries, the dataset is again replaced on further drilldown with provinces within that country. And so forth. How do you get the clicked-on continent to morph into all the countries that then come up? And how do you get the clicked-on country to morph into all the provinces that then come up?

Update: I think I found an enhancement that solves this in 5.5 which at this time has not yet been released (support multi-level drill-down for universal transition). Sounds like I may have to wait, but I'll leave this post up in case there's another way to do it.

Answer 1

EDIT:

Most of this seems to go out of the window if you specify multiple levels of groupIds. What seems to be working is setting the dataGroupId of the series to '' before setting the drilldown option. Dont ask me why but here is a working multi-drilldown example (see animals > cats).

---

Okay I think i figured it out. The most explicit way would be to use one dimension in the parent dataset to specify the groupId, pass this dimension to encode: {itemGroupId} and set the respective value as dataGroupId of the child series:

Example

dataset = [
  {
    value: 5,
    groupId: 'animals',
    name: 'animals'
  },
  {
    value: 2,
    groupId: 'fruits',
    name: 'fruits'
  },
  {
    value: 4,
    groupId: 'cars',
    name: 'cars'
  }
];


// Parent
series: [
  {
    ...,
    encode: {
      value: 'value',
      itemName: 'name',
      itemGroupId: 'groupId'
    }
  }
]


// Child
series: [
  {
    ...,
    dataGroupId: <parent groupId>,
    ...
  }
]

Additionally, there are some inexplicit things going on. You can omit the itemGroupId in 'encode' and echarts will automatically take the field named groupId from the dataset. So this works equally well.

Furthermore, its also possible to omit the groupId dimension in the data completely and echarts will map the dataGrouId of the child series to the name of the parent series. Here is an example.