使用Angular显示基于echart饼图点击的数据

Question

当我单击饼图切片时，我只想在表中显示echarts（饼图）的数据，我只想在表中显示相应的数据（单击饼图时）。所以我已经尝试了这么多天了，但我没有头绪。因此，有人可以建议如何实现它吗？我的意思是仅包含特定饼图的数据。点击饼图意味着点击的数据应该反映在表格上吗？请帮我。作为参考，请检查附件中的图像。

const tempArray = this.categoryCount.map(x => ({
        value: x.count,
        name: x.groupBy
      }));
      this.ccArray2 = tempArray;
// Pie chart
      this.PlaybookChart3 = {
        title: {
          text: "Category Breakdown",
          x: "left"
        },
        tooltip: {
          trigger: "item",
          formatter: "{c}",
          textStyle: {
            fontWeight: "bold",
            fontSize: 13
          }
        },
        // Enable drag recalculate
        calculable: true,
        series: [
          {
            type: "pie",
            radius: "75%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: this.ccArray2,
            label: {
              normal: {
                show: true,
                position: "outside"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "13"
                }
              }
            }
          }
        ]
      };

HTML代码：

<div *ngIf="PlaybookChart3 != undefined" class="col-xl-6 mat-elevation-z8 pt-3 mx-auto" myECharts
            [EChartsOptions]="PlaybookChart3" style="height: 300px;"></div>

谢谢。

https://echarts.apache.org/examples/en/editor.html?c=pie-rich-text

Answer 1

您可以在pie(echart)中向下钻取每个扇区，使用

 PlaybookChart3.on('click',
     function(params) {
             //your code
     });