如何控制echarts饼图所选数据距中心的距离

Question

当前选择的数据显示

当前选择饼图数据时，它显示如下。我希望它像悬停时一样显示。如下图所示。

想要的结果。

我已经通过series-pie.select.itemStyle尝试了文档中的组合，但仍然无法获得所需的结果。

提前谢谢您。

const option: EChartsOption = {
  color: returnColor,
  tooltip: {
    trigger: "axis",
  },
  legend: {
    show: false, // Hides the legend
  },

  labelLine: {
    show: false,
  },
  series: [{
    top: "20%", // Adjust as necessary
    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",
          },
        },
      },
    },
  }, ],
};

Answer 1

我认为没有一个很好的内置方法可以实现您想要的结果选择。它只能强调属性

scale

和

scaleSize

似乎没有记录。

也就是说，您可以使用 selectchanged 事件和代表所选项目的第二个饼图系列。

示例：

const data = [
  { value: 1048, name: 'Search Engine' },
  { value: 735, name: 'Direct' },
  { value: 580, name: 'Email' },
  { value: 484, name: 'Union Ads' },
  { value: 300, name: 'Video Ads' }
];

option = {
  series: [
    {
      id: 'main',
      type: 'pie',
      radius: ['40%', '70%'],
      label: { show: false },
      labelLine: { show: false },
      selectedMode: 'multiple',
      selectedOffset: 0,
      data: data
    }
  ]
};

myChart.on('selectchanged', function (params) {
  const selectedIndices = params.selected.length ? params.selected[0].dataIndex : [];
  const newData = structuredClone(data);
  for (let index in newData) {
    if (!selectedIndices.includes(Number(index))) {
      newData[index].itemStyle = { color: 'transparent' };
    }
  }
  myChart.setOption({series: [{id: 'main'}]}, {replaceMerge: ['series']});
  myChart.setOption({
    series: [{}, {
      id: 'selected',
      type: 'pie',
      radius: ['40%', '75%'],
      animation: false,
      silent: true,
      label: { show: false },
      labelLine: { show: false },
      data: newData,
    }]
  });
});