ECharts饼图的百分比显示问题

近日，无意中点击ECharts饼图图例时，发现隐藏某个数据点后，其它数据点的百分比显示不正常，既不是数据点本身的百分比，也不是隐藏某个数据点后重新计算的剩余数据的百分比。

正常情况下，显示如下图：

隐藏某个数据点后，显示如下：

可以发现，图中显示的“412x915”这一条数据的百分比实际上是被隐藏的第一条数据的百分比，即“1440x900”的。其余数据类似。

由此可知，ECharts饼图提示信息（Tooltip）中的百分比并没有跟随图例的显示状态动态调整，而是根据数据索引保持原有的取值顺序。

以下是原先的Tooltip代码：

typescriptCopy code
1
2
3
4
5
6
7
8
9
10
tooltip: {
  trigger: 'item',
  formatter: (params: DefaultLabelFormatterCallbackParams) => {
    const itemData = <StatDeviceEntity>params.data;
    const seriesName = `<span>${params.seriesName}</span><br />`;
    const itemName = `<span style="margin-left: 4px;">${itemData.fullLabel || itemData.label}</span>`;
    const itemValue = `<span style="margin-left: 20px; font-weight: bold;">${params.percent}%, ${itemData.count}</span>`;
    return `${seriesName}${params.marker}${itemName}${itemValue}`;
  }
}tooltip: {
  trigger: 'item',
  formatter: (params: DefaultLabelFormatterCallbackParams) => {
    const itemData = params.data;
    const seriesName = `${params.seriesName}
`;
    const itemName = `${itemData.fullLabel || itemData.label}`;
    const itemValue = `${params.percent}%, ${itemData.count}`;
    return `${seriesName}${params.marker}${itemName}${itemValue}`;
  }
}

代码中，百分比的值取自传入的params参数。

因此，只能自行计算百分比后进行显示，代码如下：

typescriptCopy code
1
2
3
4
5
6
7
8
9
10
11
tooltip: {
  trigger: 'item',
  formatter: (params: DefaultLabelFormatterCallbackParams) => {
    const itemData = <StatDeviceEntity>params.data;
    const seriesName = `<span>${params.seriesName}</span><br />`;
    const itemName = `<span style="margin-left: 4px;">${itemData.fullLabel || itemData.label}</span>`;
    const percent = (itemData.percent * 100).toFixed(2);
    const itemValue = `<span style="margin-left: 20px; font-weight: bold;">${percent}%, ${itemData.count}</span>`;
    return `${seriesName}${params.marker}${itemName}${itemValue}`;
  }
}tooltip: {
  trigger: 'item',
  formatter: (params: DefaultLabelFormatterCallbackParams) => {
    const itemData = params.data;
    const seriesName = `${params.seriesName}
`;
    const itemName = `${itemData.fullLabel || itemData.label}`;
    const percent = (itemData.percent * 100).toFixed(2);
    const itemValue = `${percent}%, ${itemData.count}`;
    return `${seriesName}${params.marker}${itemName}${itemValue}`;
  }
}

百分比直接从源数据中获取并进行格式化显示，而源数据中的百分比则需要另行计算（后端接口，or，前端接口回调中）。

修改后的饼图显示如下：

完美！[]~(￣▽￣)~*

最后，实际上，也许此时的百分比应该显示为剩余数据（也就是所有正常显示的数据）中的占比，而不是分母仍是所有数据的和，毕竟，饼图中各项的比例是重新计算过的。