html 中echarts实现可折叠3级导航左侧菜单

您好！对于您的问题，可以通过以下步骤实现可折叠3级导航左侧菜单：

1. 引入 echarts.js 和 echarts-gl.js

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts-gl/1.1.4/echarts-gl.min.js"></script>

2. 编写 HTML 结构

<div class="sidebar">
  <ul class="nav">
    <li>
      <a href="#">一级菜单</a>
      <ul class="sub-nav">
        <li>
          <a href="#">二级菜单</a>
          <ul class="sub-sub-nav">
            <li><a href="#">三级菜单</a></li>
            <li><a href="#">三级菜单</a></li>
          </ul>
        </li>
        <li><a href="#">二级菜单</a></li>
      </ul>
    </li>
    <li><a href="#">一级菜单</a></li>
  </ul>
</div>

3. 编写 CSS 样式

.sidebar {
  width: 200px;
  background-color: #f5f5f5;
  padding: 10px;
}

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  display: block;
  padding: 5px;
  color: #333;
}

.sub-nav {
  display: none;
}

.sub-nav.active {
  display: block;
}

.sub-nav .sub-sub-nav {
  display: none;
}

.sub-nav .sub-sub-nav.active {
  display: block;
}

4. 编写 JavaScript 代码

var navItems = document.querySelectorAll('.nav > li > a');

navItems.forEach(function(item) {
  item.addEventListener('click', function(e) {
    e.preventDefault();

    var subNav = item.nextElementSibling;
    var isActive = subNav.classList.contains('active');

    hideAllSubNavs();
    
    if (!isActive) {
      subNav.classList.add('active');
    }
  });
});

function hideAllSubNavs() {
  var subNavs = document.querySelectorAll('.sub-nav, .sub-sub-nav');

  subNavs.forEach(function(subNav) {
    subNav.classList.remove('active');
  });
}

5. 使用 echarts 绘制折叠菜单

var chart = echarts.init(document.querySelector('.sidebar'));

var option = {
  series: {
    type: 'treemap',
    data: [{
      name: '一级菜单',
      value: 1,
      children: [{
        name: '二级菜单',
        value: 1,
        children: [{
          name: '三级菜单',
          value: 1
        }, {
          name: '三级菜单',
          value: 1
        }]
      }, {
        name: '二级菜单',
        value: 1
      }]
    }, {
      name: '一级菜单',
      value: 1
    }]
  },
  seriesLayoutBy: 'rect',
  visualDimension: 9,
  visualMin: 10,
  leafDepth: 2,
  roam: false,
  label: {
    show: true
  },
  upperLabel: {
    show: true
  }
};

chart.setOption(option);

chart.on('click', function(params) {
  var name = params.name;
  var item = document.querySelector('.nav a[data-name="' + name + '"]');
  
  if (item) {
    var subNav = item.nextElementSibling;
    var isActive = subNav.classList.contains('active');

    hideAllSubNavs();
    
    if (!isActive) {
      subNav.classList.add('active');
    }
  }
});

这样就可以实现可折叠3级导航左侧菜单了。希望能对您有所帮助！