I'm trying to make a chart with the example below, but I haven't found any references or examples of charts that have this interaction (when you click).

like this

• Apache Charts(ECharts) 4.9.10

for now i have it

  let option: EChartsOption = {
  tooltip: {
    trigger: 'item',
  },
  legend: {
    formatter: name => {
      var series = myChart.getOption().series[0];
      var value = series.data.filter(row => row.name === name)[0].value
      return name + ': ' + value;
    },
    // selectedMode: false,
    top: '35%',
    align: 'right',
    right: 0,
    orient: 'vertical',
    icon: 'circle',
    textStyle: {
      fontWeight: 'bold'
    },
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['60%', '80%'],
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: 'center',
        formatter: (e) => {
          return `${_totalVidas.toString()} vidas`;
        },
        
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '20',
          fontWeight: 'bold',
          backgroundColor: 'grey', //Important
          formatter: (e) => {
            console.log(e);
            return `${e.value.toString()} vidas`;
          }
        }
      },
      labelLine: {
        show: true
      },
      tooltip: {
        show: false
      },
      data: [
        { value: 2000, name: 'Aguardando Aceite' },
        { value: 2500, name: 'Aprovações' },
        { value: 1500, name: 'Recusados' },
        { value: 4000, name: 'Em Aberto' },
      ]
    }
  ],
};

full example here:> https://stackblitz.com/edit/angular-ivy-jz3jsz