Apache ECharts饼图钻取功能异常求代码问题排查

API 探路者

2026-8-5

饼图钻取功能问题求助

我原本要实现钻取柱状图，改成饼图后钻取功能能正常运行，但遇到两个问题：

图例无法正常显示
X轴始终存在，没法彻底移除

附上我的JSON数据和JavaScript代码，求帮忙排查问题：

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: {
            show: false
          },
          yAxis: {
            show: false
          },
          series: {
            type: "pie",
            id: "jafurah",
            dataGroupId: subData.dataGroupId,
            data: subData.data.map(function (item) {
              return {name: item[0], value: 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]
  }
}

问题排查与修正方案

1. 图例不显示的原因

初始饼图的series.data里只设置了value和groupId，缺少name字段——ECharts饼图的图例是基于name生成的，必须给每个数据项添加对应名称，同时应该使用highLevelNumbers里的真实数值，而非硬编码的测试值。

2. X轴无法移除的原因

初始配置保留了柱状图的X/Y轴，饼图不需要坐标轴，应该直接在初始option里设置隐藏，而非点击钻取后才修改。

修正后的完整代码

function drilldownbar_Graph() {
  fetch("drilldown.json")
    .then(function (u) {
      return u.json();
    })
    .then(function (json) {
      sketchingDrillDownGraph(json);
    });

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

    // 自动生成初始饼图数据：关联名称、真实数值和对应groupId
    const initialPieData = data.highLevel.map((name, index) => {
      const groupId = name.replace(/\s+/g, '').replace(/^[a-z]/, c => c.toUpperCase());
      return {
        name: name,
        value: data.highLevelNumbers[index],
        groupId: groupId
      };
    });

    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: {
        show: false
      },
      yAxis: {
        show: false
      },
      dataGroupId: "",
      animationDurationUpdate: 500,
      series: {
        type: "pie",
        radius: ["35%", "65%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 9,
          borderColor: "black",
          borderWidth: 0.5,
        },
        id: "jafurah",
        data: initialPieData,
        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 (item) {
          return item.dataGroupId === event.data.groupId;
        });
        if (!subData) {
          return;
        }
        myChart.setOption({
          series: {
            type: "pie",
            id: "jafurah",
            dataGroupId: subData.dataGroupId,
            data: subData.data.map(function (item) {
              return {name: item[0], value: 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);
  }
}

关键修改点说明

初始数据自动生成：关联highLevel名称、highLevelNumbers真实数值，同时生成匹配钻取数据的groupId
坐标轴默认隐藏：从根源移除饼图不需要的坐标轴
图例自动适配：子数据的name字段正确生成，钻取后图例自动显示子分类名称

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

Apache ECharts饼图钻取功能异常 求代码问题排查

JSON 数据 #

JavaScript 代码 #

问题排查与修正方案 #

1. 图例不显示的原因 #

2. X轴无法移除的原因 #

修正后的完整代码 #

关键修改点说明 #