带动画的 Echarts 饼图钻取

Question

我有一个饼图，使用

dataset

、

dimensions

和

encode

（不是嵌入

data

中的

series

）。单击图表中的系列后，我重新查询数据库以获取向下钻取数据，其中父级是单击的系列的值。然后

replaceMerge

数据集和一个新的饼图被绘制。

我想以类似于 Echarts 示例所示的方式为该钻取设置动画（钻取示例）。但我无法弄清楚如何将新系列与单击的父系列相关联。如果没有这种关联，Echarts 只会对整个图表进行动画处理，而不会产生“钻取”效果，从而使动画毫无意义，因为它无法传达任何信息。

文档提到了

encode.itemGroupId

，但不清楚我应该将其设置为什么。钻取数据中的所有系列在 

encode.itemGroupId

 指定的字段中是否应该具有相同的值？这是有道理的，但这与点击的父系列有什么联系呢？父级将具有不同的值，除非它与另一个字段匹配（例如 

id

 而不是 

itemGroupId

）。文档没有解释。

我的代码（和数据）过于复杂和模块化，无法在此处共享多个组件，让我尝试描述我正在做的事情并举例说明。假设我的顶级数据是各大洲，当您单击某个大洲时，数据集将被替换为显示国家/地区

在该大洲内的新数据。当您单击其中一个国家/地区时，数据集会在进一步深入分析时再次替换为“该国家/地区内”的省份。等等。如何让点击的大陆变成随后出现的所有国家？如何让点击的国家/地区变成随后出现的所有省份？ 更新：

我想我在5.5中找到了一个解决这个问题的增强功能，但目前尚未发布（

支持通用过渡的多级下钻）。听起来我可能需要等待，但我会保留这篇文章，以防有其他方法可以做到这一点。

好吧，我想我明白了。最明确的方法是使用父数据集中的一个维度来指定

Answer 1

，将此维度传递给

encode: {itemGroupId}

 并将相应的值设置为子系列的 

dataGroupId

：

示例

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>,
    ...
  }
]

此外，还有一些不明确的事情发生。你可以省略encode中的

itemGroupId

，echarts会自动从数据集中取出名为

groupId

的字段。所以

this

同样有效。

此外，也可以完全省略数据中的groupId

维度，echarts会将子系列的

dataGrouId

映射到父系列的名称上。 

这里

是一个例子。