apache echart not working with pie drill down

the drill down for pie isnt working that well, can you please let me know what im missing?

i want to have a drill down bar chart however, i changed it to pie as its what i need but running into some issues - wondering if someone has done this before, and/ can help find issues with my code. this is what it looks like right now, cant add legend or get rid of those x axis.

functionality is there but just want to make it work.

json.

{
  "highLevelNumbers": [
    1269,15,54624,827,42,20895,4856
  ],
  "highLevel":
  ["Electrical Equipment",
  "Enclosures",
  "Instrument Equipment",
  "Mechanical Equipment",
  "Miscellaneous Equipment",
  "Piping and Pipeline Equipment",
  "Valve"],

  "ElectricalEquipment":
     [["earthing resistor",52],
      ["electric battery", 66],
      ["electric generator", 1],
      ["electrical control panel", 305],
      ["electrical isolator", 38],
      ["electrical switch", 43],
      ["electronic flow controller", 341],
      ["electronic level controller", 225],
      ["electronic pressure controller", 232],
      ["electronic temperature controller", 121]],

     "Enclosures":
     [["electrical control panel", 305],
      ["electrical isolator", 38],
      ["electrical switch", 43]],

     "InstrumentEquipment":
     [["electrical isolator", 38],
      ["electrical switch", 43],
      ["electronic flow controller", 341]],

     "MechanicalEquipment":
     [["earthing resistor",52],
      ["electrical control panel", 305]],

     "MiscellaneousEquipment":
     [["earthing resistor",52],
  

["electronic flow controller", 341]],
 "PipingandPipelineEquipment":
 [["earthing resistor",52],
  ["electronic flow controller", 341]],
 "Valve":
 [["earthing resistor",52],
  ["electrical switch", 43],
  ["electronic flow controller", 341]]

}

javascript:

function drilldownbar_Graph() {
  //values from data_import
  //fetch function
  fetch("drilldown.json")
    .then(function (u) {
      return u.json();
    })
    .then(function (json) {
      sketchingDrillDownGraph(json);
      //calling and passing json to another function data_function
    });

  //start of function
  function sketchingDrillDownGraph(data) {
    //graph
    var chartDom = document.getElementById("main6");
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: "Drill Down Category",
        left: "center",
        borderColor: "#796b94",
        borderWidth: 0.1,
      },
      legend: {
        show: true,
      },
      label: {
        show: true,
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          restore: { show: true },
          saveAsImage: { show: true },
        },
      },
      xAxis: {
        data: data.highLevel,
        splitLine: {
          show: false,
        },
      },
      yAxis: {
        splitLine: {
          show: false,
        },
      },
      dataGroupId: "",
      animationDurationUpdate: 500,
      series: {
        type: "pie",
        radius: ["35%", "65%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 9,
          borderColor: "black",
          borderWidth: 0.5,
        },
        id: "jafurah",
        data: [
          {
            value: 5,
            groupId: "electricalEquipment",
          },
          {
            value: 2,
            groupId: "Enclosures",
          },
          {
            value: 4,
            groupId: "InstrumentEquipment",
          },
          {
            value: 4,
            groupId: "MechanicalEquipment",
          },
          {
            value: 4,
            groupId: "MiscellaneousEquipment",
          },
          {
            value: 4,
            groupId: "PipingandPipelineEquipment",
          },
          {
            value: 5,
            groupId: "Valve",
          },
        ],
        universalTransition: {
          enabled: true,
          divideShape: "clone",
        },
      },
    };
    const drilldownData = [
      {
        dataGroupId: "electricalEquipment",
        data: data.electricalEquipment,
      },
      {
        dataGroupId: "Enclosures",
        data: data.Enclosures,
      },
      {
        dataGroupId: "InstrumentEquipment",
        data: data.InstrumentEquipment,
      },
      {
        dataGroupId: "MechanicalEquipment",
        data: data.MechanicalEquipment,
      },
      {
        dataGroupId: "MiscellaneousEquipment",
        data: data.MiscellaneousEquipment,
      },
      {
        dataGroupId: "PipingandPipelineEquipment",
        data: data.PipingandPipelineEquipment,
      },
      {
        dataGroupId: "Valve",
        data: data.Valve,
      },
    ];
    myChart.on("click", function (event) {
      if (event.data) {
        var subData = drilldownData.find(function (data) {
          return data.dataGroupId === event.data.groupId;
        });
        if (!subData) {
          return;
        }
        myChart.setOption({
          xAxis: {
            data: subData.data.map(function (item) {
              return item[0];
            }),
          },
          series: {
            type: "pie",
            id: "jafurah",
            dataGroupId: subData.dataGroupId,
            data: subData.data.map(function (item) {
              return item[1];
            }),
            universalTransition: {
              enabled: true,
              divideShape: "clone",
            },
          },
          graphic: [
            {
              type: "text",
              left: 50,
              top: 20,
              style: {
                text: "Back",
                fontSize: 18,
              },
              onclick: function () {
                myChart.setOption(option);
              },
            },
          ],
        });
      }
    });

    option && myChart.setOption(option);

    // getting the data [docs total by day]
  }
}

To get rid of xAxis : just remove it in the chart options. (Both xAxis and yAxis actually, no need of that in a pie chart)

To display the legend, you have to set a name to each series.

series : {
  data: [
    {
      value: 5,
      groupId: "electricalEquipment",
      name: "electricalEquipment", // add this line to each series data
    },
  ...
  ]
}

Here is the full working code (note that I hardcoded the values instead of using your json file to make it easier for me).
I added a param (notMerge=true) in this method : myChart.setOption(option, true); (in the click event function) so that the "Back" button disappears when it cannot be used.