原生js+div+css，动态画结构图/流程图

最新推荐文章于 2024-08-08 07:43:10 发布

gyysmile

最新推荐文章于 2024-08-08 07:43:10 发布

阅读量1.1w

点赞数 2

分类专栏：前端开发文章标签： js css div

本文链接：https://blog.csdn.net/gyysmile/article/details/85233496

版权

前端开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前面用highchart尝试画了一次，但是因为种种因素，还是用js+div+css实现起来比较方便。

代码如下，可直接复制粘贴。

html部分：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动态绘制结构图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div.rect {
            height: 40px;
            border-radius: 10px;
            background: pink;
            text-align: center;
            padding: 5px;
            margin: 5px 5px;
        }

        div.rect:hover {
            cursor: pointer;
        }

        div.rect p {
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        div.flex {
            display: flex;
            justify-content: center;
            flex-wrap: wrap
        }

        div.flex > div {
            width: 25%;
        }

        div.arrow {
            margin: 0 10px 0;
        }

        div.arrow-body {
            width: 20px;
            height: 50px;
            background: #ccc;
            margin: 0 auto;
        }

        div.arrow-footer {
            width: 0;
            height: 0;
            border-width: 30px 30px 0;
            border-style: solid;
            border-color: #ccc transparent transparent; /*灰 透明 透明 */
            margin: 0 auto;
        }

        #container {
            width: 650px;
            /*height: 450px;*/
            margin: 50px auto;
            /*padding-top: 10px;*/
            /*padding-right: 10px;*/
            /*overflow-y: auto*/
        }
    </style>
</head>
<body>
<div id="container"></div>
</body>
</html>

js部分：

<script>
    let data = {
        root: [
            {title: '根节点1', color: 'red'},
            {title: '根节点2', color: 'yellow'},
            {title: '根节点3', color: 'skyblue'},
        ],
        child: [
            {title: '节点', color: '#cca057'}
        ],
        child2: [
            {title: '子节点1'},
            {title: '子节点2阿诗阿范德萨士大夫士大夫实打实地方的所得税法的萨芬撒地方丹顿'},
            {title: '子节点3子节点3子节点3子节点3'},
            {title: '子节点4'},
            {title: '子节点5'},
            {title: '子节点6'},
            {title: '子节点7'},
            {title: '子节点8'}
        ]
    };

    let pic = {
        load(domName, datas) {
            let num = Object.keys(datas).length;
            Object.keys(datas).forEach((i, j) => {
                pic.rect('container', datas[i], (j + 1) === num);
            });
            this.bindEvents()
        },
        rect(domName, data, isEnd) {
            let div = document.createElement("div");
            div.classList.add("flex");
            for (let i in data) {
                div.innerHTML += '<div>\n' +
                    '            <div class="rect" style="background: ' + data[i].color + '" data="' + data[i].title + '" p-data="' + data.root + '">\n' +
                    '                <p>' + data[i].title + '</p>\n' +
                    '            </div>\n' +
                    '        </div>';
            }
            document.getElementById(domName).appendChild(div);
            if (!isEnd) {
                let arrow = document.createElement("div");
                arrow.classList.add("arrow");
                arrow.innerHTML +=
                    '        <div class="arrow-body"></div>\n' +
                    '        <div class="arrow-footer"></div>\n';
                document.getElementById(domName).appendChild(arrow)
            }
        },
        bindEvents() {
            let rect = document.getElementsByClassName('rect');
            for (let i = 0, rule; rule = rect[i++];) {
                rule.addEventListener('click', () => {
                    let title = rule.getAttribute('data');
                    alert(title);
                });
            }
        }
    };

    window.onload = function () {
        pic.load('container', data);
    };
</script>

效果图：