如何控制ECharts饼图选中数据与中心的距离

当前饼图选中数据的显示效果未达到预期，我希望选中时的显示效果和悬停（hover）时完全一致。已经尝试过ECharts官方文档中series-pie.select.itemStyle相关配置组合，但仍无法实现目标效果。

以下是当前的ECharts配置代码：

const option: EChartsOption = {
  color: returnColor,
  tooltip: {
    trigger: "axis",
  },
  legend: {
    show: false, // 隐藏图例
  },

  labelLine: {
    show: false,
  },
  series: [{
    top: "20%", // 根据需要调整
    name: t("home.brands"),
    type: "pie",
    center: ["50%", "32%"],
    radius: ["70%", "100%"],
    selectedMode: true,
    select: {
      itemStyle: {
        borderJoin: 'miter',
        borderMiterLimit: 10,
      }
    },
    data,
    label: {
      show: true,
      position: "center",
      fontSize: 20,
      fontWeight: "bold",
      formatter: () => {
        const iconStyle =
          overAllFilter.vehicleInput === "HYUN" ?
          "HYUNDAI" :
          overAllFilter.vehicleInput ?
          overAllFilter.vehicleInput :
          "global";
        const name =
          overAllFilter.vehicleInput === "HYUN" ?
          "HYUNDAI" :
          overAllFilter.vehicleInput ?
          overAllFilter.vehicleInput :
          "";
        return iconStyle === "global" ?
          `{${iconStyle}|}` :
          `{${iconStyle}|}\n{name|${name}}`;
      },
      textStyle: {
        rich: {
          global: {},
          BMW: {
            backgroundColor: {
              image: "/logo/brand/bmw.webp",
            },
            width: 90,
            height: 50,
          },
          BYD: {
            backgroundColor: {
              image: "/logo/brand/byd.webp",
            },
            width: 90,
            height: 50,
          },
          HYUNDAI: {
            backgroundColor: {
              image: "/logo/brand/hyundai.webp",
            },
            width: 70,
            height: 50,
          },
          JLR: {
            backgroundColor: {
              image: "/logo/brand/jlr.webp",
            },
            width: 70,
            height: 50,
          },
          name: {
            color: "#fff",
            fontSize: 20,
            position: "center",
          },
        },
      },
    },
    emphasis: {
      label: {
        show: true,
        fontSize: 40,
        fontWeight: "bold",
        formatter(item) {
          const entry = data.find((obj) => obj.name === item.name);
          const iconStyle = entry?.icon || entry?.icon || "defaultIcon";
          return `{${iconStyle}|}\n {name|${entry?.name}} `;
        },
        rich: {
          BMW: {
            backgroundColor: {
              image: "/logo/brand/bmw.webp",
            },
            width: 90,
            height: 50,
            align: "center",
          },
          HYUNDAI: {
            backgroundColor: {
              image: "/logo/brand/hyundai.webp",
            },
            width: 70,
            height: 50,
          },
          BYD: {
            backgroundColor: {
              image: "/logo/brand/byd.webp",
            },
            width: 90,
            height: 50,
          },
          JLR: {
            backgroundColor: {
              image: "/logo/brand/jlr.webp",
            },
            width: 70,
            height: 50,
          },
          name: {
            backgroundColor: "#222338",
            color: "#fff",
            fontSize: 20,
            position: "center",
          },
        },
      },
    },
  }, ],
};

解决方案 #

要让选中状态和悬停效果完全一致，需要同步select和emphasis的配置，核心修改如下：

1. 将emphasis中的label配置完整复制到select中，确保选中时的标签样式、格式与悬停一致
2. 给select.itemStyle添加偏移量，模拟悬停时扇区的视觉偏移效果

修改后的series中select部分代码：

select: {
  // 完全复用悬停时的label配置
  label: {
    show: true,
    fontSize: 40,
    fontWeight: "bold",
    formatter(item) {
      const entry = data.find((obj) => obj.name === item.name);
      const iconStyle = entry?.icon || entry?.icon || "defaultIcon";
      return `{${iconStyle}|}\n {name|${entry?.name}} `;
    },
    rich: {
      BMW: {
        backgroundColor: {
          image: "/logo/brand/bmw.webp",
        },
        width: 90,
        height: 50,
        align: "center",
      },
      HYUNDAI: {
        backgroundColor: {
          image: "/logo/brand/hyundai.webp",
        },
        width: 70,
        height: 50,
      },
      BYD: {
        backgroundColor: {
          image: "/logo/brand/byd.webp",
        },
        width: 90,
        height: 50,
      },
      JLR: {
        backgroundColor: {
          image: "/logo/brand/jlr.webp",
        },
        width: 70,
        height: 50,
      },
      name: {
        backgroundColor: "#222338",
        color: "#fff",
        fontSize: 20,
        position: "center",
      },
    },
  },
  itemStyle: {
    borderJoin: 'miter',
    borderMiterLimit: 10,
    // 添加扇区偏移，匹配悬停时的视觉效果，可根据实际调整数值
    offsetCenter: [0, -10]
  }
}

说明 #

• 同步label配置：确保选中时的图标、文字样式、格式和悬停完全一致
• 添加offsetCenter：ECharts默认给悬停的饼图扇区添加了偏移，选中状态默认没有，通过这个配置补全视觉效果，数值可根据实际显示调整
• 如果需要更精确匹配，可以检查emphasis.itemStyle中的其他配置（比如阴影、边框），一并复制到select.itemStyle中

内容的提问来源于stack exchange，提问作者Firdaus Samsudin