百度ECharts做一个可展开收缩思维导图-web建站教程在线编辑器

源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 实例</title>
	<script src="/js/jquery-1.9.0.min.js"></script>
    
    <script src="/js/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 900px;height:380px;"></div>
    <script type="text/javascript">
        option = {
          tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove',
            backgroundColor : '#dfdfdf',
            textStyle: {
              color : 'black'
            }
          },
          series: [{
            type: "tree",
            symbolSize: 75,
            symbol: 'roundRect',
            
            edgeShape: 'polyline',
            edgeForkPosition: '50%',
            initialTreeDepth: 2,
        
            orient: 'vertical',
        
            itemStyle: {
              color: 'black',
              borderColor: 'black',
            },
        
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750,
            
            lineStyle: {
              color: '#7b7b7b',
              width: 3
            },
        
            label: {
                show: true,
                position: 'inside',
                textStyle: {
                  fontSize: 15,
                  color: '#fff',
                },
            },
        
            leaves: {
              label: {
                position: 'inside',
                color: '#fff'
              },
              itemStyle: {
                color: '#dfdfdf',
                borderColor: '#dfdfdf',
              }
            },
        
            data: [{
            name: "根节点",
            url: '',
            // 根节点样式设置
            itemStyle: {
              color: '#b039ff',
              borderColor: '#b039ff',
            },
            children: [
              {
              name: "子节点1",
              children: [{
              name: "孙节点1"
              }, {
              name: "孙节点2"
              }, {
              name: "孙节点3"
              }]
            }, {
              name: "子节点2",
              children: [{
              name: "孙节点4"
              }, {
              name: "孙节点5"
              }, {
              name: "孙节点6"
              }]
            }]
            }],
        
          }]
        }
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option);
    </script>
</body>
</html>

源代码：点击运行 》

运行结果：

源代码：