Echarts 柱状图表三级下钻

Question

求个柱状图表 三级下钻的案例：
【点击一级图表柱子名称，进入 二级图表； 二级图表中，再点击本图层的柱子名称，进入三级图表，每层有返回上一级图表的 返回 按钮】重点在咋区分，点击事件 是在 一级图表还是二级图表

实现：BootStrap + Echatrts:

源数据大概如下：

//一级：
//一级caseName01的value值16 是这个caseName01这条case下，每个version的值的总和（10+4+2）
data=[
{Name:caseName01，
value:16},
{Name:caseName02，
value:6},
{Name:caseName03，
value:9}
]
//二级（点击一级的caseName01，进到对应caseName的二级的数据图表集）：
//二级图表Version01的value 10，和三级图表中这个version对应的UE value的总和（7+2+1）对应
data2=[
{Version:verison01，
value:10},
{Version:verison02，
value:4},
{Version:verison03，
value:2}
]
//三级（点击二级的version01,进到三级的数据图表集）：
data3=[
{UE:UE01，
value:7},
{UE:UE01
value:2},
{UE:UE01
value:1}
]

Answer 1

已解决任意时候点击都能保证下钻或者返回正确，试试我的代码案例，有返回按钮，html没有变，修改版在下面js代码里，希望能帮到你，

html代码

<div class="container">
    <h1>Echarts 柱状图表三级下钻</h1>
    <div id="chartContainer" style="height: 400px;"></div>
    <button id="backButton" style="display: none;">返回</button>
    </div>

js代码：

<script type="text/javascript">
   document.addEventListener('DOMContentLoaded', function() {
  const chartContainer = document.getElementById('chartContainer');
const backButton = document.getElementById('backButton');

  let currentLevel = 1; // 当前层级
  let currentCategory = null; // 当前点击的分类
  let currentSubcategory = null; // 当前点击的子分类

  const level1Data = [
    { name: 'Category 1', value: 100 },
    { name: 'Category 2', value: 200 },
    { name: 'Category 3', value: 300 },
  ];


  const level2Data = {
    "Category 1": [
      { name: 'Subcategory 1-1', value: 50 },
      { name: 'Subcategory 1-2', value: 70 },
    ],
     "Category 2": [
      { name: 'Subcategory 2-1', value: 80 },
      { name: 'Subcategory 2-2', value: 120 },
    ],
    "Category 3": [
      { name: 'Subcategory 3-1', value: 150 },
      { name: 'Subcategory 3-2', value: 200 },
    ]
  };

  const level3Data = {
    "Subcategory 1-1": [
      { name: 'Data 1', value: 10 },
      { name: 'Data 2', value: 20 },
    ],
    "Subcategory 1-2": [
      { name: 'Data 3', value: 30 },
      { name: 'Data 4', value: 40 },
    ],
    "Subcategory 2-1": [
      { name: 'Data 5', value: 50 },
      { name: 'Data 6', value: 60 },
    ],
    "Subcategory 2-2": [
      { name: 'Data 7', value: 70 },
      { name: 'Data 8', value: 80 },
    ],
    "Subcategory 3-1": [
      { name: 'Data 9', value: 90 },
      { name: 'Data 10', value: 100 },
    ],
    "Subcategory 3-2": [
      { name: 'Data 11', value: 110 },
      { name: 'Data 12', value: 120 },
    ],
  };
    const chart = echarts.init(chartContainer);
    const renderChart = (data, title, color) => {


    const option = {
      title: {
        text: title,
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: data.map(item => item.name),
      },
      yAxis: {},
      series: [{
        type: 'bar',
        data: data.map(item => item.value),
        itemStyle: {
          color: color,
        }
      }],
    };
    chart.setOption(option);
    // 下钻点击事件

  };

  renderChart(level1Data, '一级图表', '#5470C6');

    chart.on('click', function(params) {
      if (currentLevel === 1) {
        currentLevel = 2;
        currentCategory = params.name;
        console.log("测试1进"+currentLevel)
        renderChart(level2Data[params.name], '二级图表', '#91CC75');
         backButton.style.display = 'inline-block'; // 显示返回按钮
      }
      else if (currentLevel === 2) {
        currentLevel = 3;
        currentSubcategory = params.name;
        console.log("测试2进"+currentLevel)
        renderChart(level3Data[currentSubcategory], '三级图表', '#FFB980');
         backButton.style.display = 'inline-block'; // 显示返回按钮
      }
    });


    // 返回按钮点击事件
                backButton.addEventListener('click', function() {
                    if (currentLevel === 2) {
                        currentLevel = 1;
                          currentCategory = null; // 当前点击的分类
   currentSubcategory = null; // 当前点击的子分类
                        renderChart(level1Data, '一级图表', '#5470C6');
                        backButton.style.display = 'none'; // 隐藏返回按钮
                    } else if (currentLevel === 3) {
                        currentLevel = 2;
                        renderChart(level2Data[currentCategory], '二级图表', '#91CC75');
                        backButton.style.display = 'inline-bloc'; // 显示返回按钮
}
});

});
    </script>