父子节点js转图数据库 

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div id="container" style="height: 800px;" class="col-md-6"></div>
 
    <textarea id="txtDs">
围术期心肌损伤    定义
围术期心肌损伤    症状
围术期心肌损伤    预防
围术期心肌损伤    治疗
围术期心肌损伤    危险因素
定义    心肌酶
定义    脑钠肽
定义    术后心电图
定义    症状
定义    会诊
症状    心梗
症状    心律失常
症状    心绞痛
症状    胸口疼痛
预防    选择合适的手术及麻醉方式
预防    减少操作次数
预防    简单策略
预防    药物预防
治疗    药物治疗
治疗    其他治疗
药物治疗    阿司匹林
药物治疗    氯吡格雷
药物治疗    肝素
药物治疗    比伐卢定
药物治疗    普拉格雷
药物治疗    替卡格雷
药物治疗    β受体阻滞剂
药物治疗    钙拮抗剂
药物治疗    尼可地尔
药物治疗    腺苷
危险因素    ASA分级OR=529461.74
危险因素    PH值OR=6178.75
危险因素    中性粒细胞OR=7.96
危险因素    心脏大血管疾病OR=5.26
危险因素    冠心病OR=3.77
危险因素    肾功能不全OR=3.29
危险因素    消化系统疾病OR=1.92
危险因素    内分泌疾病OR=1.79
危险因素    糖尿病OR=1.71
危险因素    神经系统疾病OR=1.35
危险因素    CK-MB OR=1.27
危险因素    尿素OR=1.2
危险因素    外科手术史OR=1.15
危险因素    高血压OR=1.12
危险因素    年龄OR=1.1
危险因素    是否使用PCAOR=1.1
危险因素    丙型病毒性肝炎OR=1.1
危险因素    饮酒史OR=1.08
危险因素    葡萄糖OR=1.08
危险因素    体重减轻OR=1.07
危险因素    血氧饱和度OR=1.07
危险因素    血红蛋白OR=1.04
危险因素    恶性肿瘤OR=1.03
危险因素    肾小球滤过率OR=1.03
危险因素    吸烟OR=1.01
危险因素    谷草转氨酶OR=1.01
危险因素    代谢性酸中毒OR=1.01
危险因素    CK OR=1.01
危险因素    血沉OR=1.01
    </textarea>



    <script type="text/javascript">


        var chartJson = {
            categories: [],
            links: [],
            nodes: []
        };


        (function () {

            var list = $("#txtDs").val().split('\n').map(function (n) {
                //合并空格
                return n.replace(/\s+/g, ' ').split(' ');
            });

            var dic = {};

            var symbolSize = 20;

            var nodeId = 0;
 

            var prev = {};



            list.forEach(function (n) {
                var key = n[0];
                if (!key) {
                    return;
                }
                var categoryId = chartJson.categories.findIndex(function (n) {
                    return n.name == key;
                });
                if (categoryId === -1) {
                    categoryId = chartJson.categories.push({name:key}) - 1;
                }


                var val = n[1];
                var pnode = dic[key];
                
                if (pnode=== undefined) {
                    var node = {
                        category: categoryId,
                        id: nodeId++,
                        name: key,
                        symbolSize: 20,
                        value: 0,
                    };
                    dic[node.name] = node;
                    chartJson.nodes.push(node);
                    pnode=node;
                }

                var node;
                var node;
                if (dic[val]) {
                    node = dic[val];
                } else {
                    node = {
                        category: categoryId,
                        id: nodeId++,
                        name: val,
                        symbolSize: 10,
                        value: pnode.value + 1,

                    };
                    dic[node.name] = node;
                    chartJson.nodes.push(node);
                }

               
               

              
                chartJson.links.push({
                    source: node.id,
                    target: pnode.id
                });



               

                prev.key = key;
                prev.val = val;
            });
        })();




        var dom = document.getElementById("container");

        var myChart = echarts.init(dom);
        var app = {};

        var option;



        myChart.showLoading();
        (function (graph) {
            myChart.hideLoading();

            //graph.nodes.forEach(function (node) {
            //    node.label = {
            //        show: node.symbolSize > 30
            //    };
            //});
            option = {
                title: {
                    text: ' ',

                    top: 'bottom',
                    left: 'right'
                },
                tooltip: {},
                legend: [{
                    // selectedMode: 'single',
                    data: graph.categories.map(function (a) {
                        return a.name;
                    })
                }],

                animationDuration: 1500,
                animationEasingUpdate: 'quinticInOut',
                series: [
                    {
                        name: '知识图谱',
                        type: 'graph',
                        layout: 'force',

                        data: graph.nodes,
                        links: graph.links,
                        categories: graph.categories,
                        roam: true,
                        label: {
                            show: true,
                            position: 'right',
                            formatter: '{b}'
                        },
                        lineStyle: {
                            color: 'source',
                            curveness: 0.3
                        },
                        force: {
                            repulsion: 200
                        },
                        emphasis: {
                            focus: 'adjacency',
                            lineStyle: {
                                width: 10
                            }
                        }
                    }
                ]
            };

            myChart.setOption(option);

        })(chartJson);

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }


    </script>
</body>
</html>

 

posted on 2021-04-16 11:54  RedQ-Alright  阅读(81)  评论(0)  编辑  收藏  举报

导航