echarts树图二级子节点分别有几千个三级子节点设置默认展开5个子节点及一个展开更多子节点点击展开更多子节点时再追加展示固定数量的子节点

每一天，每一步

已于 2024-12-10 16:56:46 修改

阅读量302

点赞数 2

分类专栏： ECharts 文章标签： echarts 前端

于 2024-12-10 16:35:00 首次发布

本文链接：https://blog.youkuaiyun.com/u010234868/article/details/144377362

版权

ECharts 专栏收录该内容

38 篇文章

订阅专栏

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>ECharts</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
    <div id="main" style="height: 100%"></div>
    <script type="text/javascript">
        // 预处理原始数据以限制默认展开的叶子节点数量，并添加“展开更多”节点
        function limitChildren(data, maxVisible) {
            data.forEach(item => {
                if (item.children && item.children.length > maxVisible) {
                    // 保存剩余的子节点
                    item._remaining = item.children.slice(maxVisible);

                    // 创建“展开更多”节点
                    const moreNode = {
                        id: `${item.id}_more`,
                        name: '展开更多',
                        _isMoreNode: true,
                        symbol: 'emptyCircle', // 使用空心圆作为特殊图标
                        label: {
                            normal: {
                                color: '#ff7f50' // 给“展开更多”节点设置特殊颜色
                            }
                        },
                        children: []
                    };

                    // 只保留前maxVisible个子节点加上“展开更多”节点
                    item.children = item.children.slice(0, maxVisible).concat([moreNode]);
                }

                // 递归处理子节点
                if (item.children) {
                    limitChildren(item.children, maxVisible);
                }
            });
        }

        // 动态加载更多子节点，每次加载固定数量
        function loadMore(moreNode, chart, increment) {
            const options = chart.getOption();
            const treeData = JSON.parse(JSON.stringify(options.series[0].data));

            // 查找包含 "展开更多" 节点的父节点
            function findParent(data, moreNodeId) {
                for (let i = 0; i < data.length; i++) {
                    if (data[i].children) {
                        const childIndex = data[i].children.findIndex(child => child.id === moreNodeId);
                        if (childIndex !== -1) {
                            return { parent: data[i], index: childIndex };
                        } else {
                            const result = findParent(data[i].children, moreNodeId);
                            if (result) return result;
                        }
                    }
                }
                return null;
            }

            const parentNodeInfo = findParent(treeData, moreNode.id);
            if (parentNodeInfo && parentNodeInfo.parent._remaining) {
                const targetNode = parentNodeInfo.parent;
                const remaining = targetNode._remaining.slice(0, increment);
                targetNode.children.splice(parentNodeInfo.index, 1, ...remaining); // 移除“展开更多”节点并插入新的子节点
                targetNode._remaining = targetNode._remaining.slice(increment);

                // 如果还有剩余子节点，则重新添加“展开更多”节点
                if (targetNode._remaining.length > 0) {
                    targetNode.children.push({
                        id: `${targetNode.id}_more`,
                        name: '展开更多',
                        _isMoreNode: true,
                        symbol: 'emptyCircle',
                        label: {
                            normal: {
                                color: '#ff7f50'
                            }
                        },
                        children: []
                    });
                } else {
                    delete targetNode._remaining; // 没有更多子节点时删除 _remaining 属性
                }

                // 更新图表数据
                chart.setOption({
                    series: [{
                        data: treeData
                    }]
                });
            }
        }

        // 模拟原始数据结构
        const originalData = [
            {
                id: 'root',
                name: 'Root Node',
                children: [
                    {
                        id: 'level2_1',
                        name: 'Level 2 Node 1',
                        children: Array.from({ length: 2000 }, (_, i) => ({
                            id: `level3_${i + 1}`,
                            name: `Level 3 Node ${i + 1}`
                        }))
                    },
                    {
                        id: 'level2_2',
                        name: 'Level 2 Node 2',
                        children: Array.from({ length: 2000 }, (_, i) => ({
                            id: `level3_${i + 1001}`,
                            name: `Level 3 Node ${i + 1001}`
                        }))
                    }
                ]
            }
        ];

        // 应用数据预处理
        const processedData = JSON.parse(JSON.stringify(originalData)); // 深拷贝原始数据
        limitChildren(processedData, 5); // 默认展开5个叶子节点加一个“展开更多”节点

        // 初始化图表
        var myChart = echarts.init(document.getElementById('main'));

        // 准备数据和选项
        var option = {
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove'
            },
            series: [
                {
                    type: 'tree',
                    id: 0,
                    name: 'tree1',
                    top: '1%',
                    left: '7%',
                    bottom: '1%',
                    right: '20%',
                    symbolSize: 7,
                    label: {
                        position: 'left',
                        verticalAlign: 'middle',
                        align: 'right',
                        fontSize: 9
                    },
                    leaves: {
                        label: {
                            position: 'right',
                            verticalAlign: 'middle',
                            align: 'left'
                        }
                    },
                    expandAndCollapse: true,
                    animationDuration: 550,
                    animationDurationUpdate: 750,
                    data: processedData
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);

        // 监听节点点击事件，处理“展开更多”
        myChart.on('click', function (params) {
            if (params.data && params.data._isMoreNode) {
                loadMore(params.data, myChart, 5); // 每次加载5个额外的叶子节点
            }
        });

        // Debugging: Ensure the root node has the "展开更多" property after processing
        console.log(processedData); // Check this in the browser's console to verify the structure
    </script>
</body>
</html>