java
/
diagbotcloud


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443
							<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ECharts 关系图</title>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/echarts.js"></script>
</head>

<body>
<h1><select id="sel" style="height: 26px;margin-right: 10px;"><option value="Disease">诊断</option><option value="Symptom">症状</option><option value="Treat">治疗</option></select><input id="inputStr" style="height: 20px;"><input type="button" id="search" value="搜索" style="margin-left: 10px;"></h1>
<div id="main" style="width:1000px;height:800px"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var categories = [
        // {
        //     "name":"中心词"
        // },
        // {
        //     "name":"关系"
        // },
        // {
        //     "name":"相关症状",
        //     "symbol":"circle",
        //     "symbolSize":28
        // },
        // {
        //     "name":"发病部位",
        //     "symbol":"circle",
        //     "symbolSize":28
        // },
        // {
        //     "name":"所属科室",
        //     "symbol":"circle",
        //     "symbolSize":28
        // },
        // {
        //     "name":"检查",
        //     "symbol":"circle",
        //     "symbolSize":28
        // },
        // {
        //     "name":"相关疾病",
        //     "symbol":"circle",
        //     "symbolSize":28
        // }
    ];
    var data = {"labelName":"Disease", "inputStr": "糖尿病"};
    $.ajax({
        type: "post",
        url: "http://localhost:5050/api/ltkg/kg/getTu",
        data: JSON.stringify(data),
        contentType: "application/json;charset=UTF-8",
        dataType: "json",
        success: function(res){
            console.log(res);
            var data = res.data;
            option.series[0].data = data.nodeList;
            option.series[0].links = data.linksList;
            option.series[0].categories = data.categoriesList;
            option.legend[0].data = data.categoriesList.slice(2, data.categoriesList.length);
            myChart.setOption(option);
        }
    });

    option = {
        // 图的标题
        title: {
            text: 'ECharts 关系图'
        },
        // 提示框的配置
        tooltip: {
            formatter: function (x) {
                return x.data.des;
            }
        },
        // 工具箱
        toolbox: {
            // 显示工具箱
            show: true,
            feature: {
                mark: {
                    show: true
                },
                // 还原
                restore: {
                    show: true
                },
                // 保存为图片
                saveAsImage: {
                    show: true
                }
            }
        },
        legend: [{
            // selectedMode: 'single',
            data: categories.map(function (a) {
                return a.name;
            })
        }],
        series: [{
            type: 'graph', // 类型:关系图
            layout: 'force', //图的布局，类型为力导图
            // symbolSize: 40, // 调整节点的大小
            roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [2, 10],
            edgeLabel: {
                normal: {
                    textStyle: {
                        fontSize: 20
                    }
                }
            },
            force: {
                repulsion: 200,
                edgeLength: [10,50],
                layoutAnimation: false
            },
            draggable: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: '#4b565b'
                }
            },
            edgeLabel: {
                normal: {
                    show: true,
                    formatter: function (x) {
                        return x.data.value;
                    }
                }
            },
            label: {
                normal: {
                    show: true,
                    formatter: function (x) {
                        return x.data.label;
                    },
                    textStyle: {}
                }
            },

            // 数据
            data: [
                {
                    "category":0,
                    "label":"咳嗽",
                    "name":0,
                    "symbolSize":50
                },
                {
                    "category":1,
                    "label":"",
                    "name":1,
                    "symbol":"diamond",
                    "symbolSize":10
                },
                {
                    "category":2,
                    "label":"点滴状便血",
                    "name":2,
                    "symbolSize":28
                },
                {
                    "category":2,
                    "label":"膀胱蓄热小便失禁",
                    "name":3,
                    "symbolSize":28
                },
                {
                    "category":2,
                    "label":"百日咳",
                    "name":4,
                    "symbolSize":28
                },
                {
                    "category":2,
                    "label":"大量胸水",
                    "name":5,
                    "symbolSize":28
                },
                {
                    "category":1,
                    "label":"",
                    "name":6,
                    "symbol":"diamond",
                    "symbolSize":10
                },
                {
                    "category":3,
                    "label":"头部",
                    "name":7,
                    "symbol":"rect",
                    "symbolSize":28
                },
                {
                    "category":1,
                    "label":"",
                    "name":8,
                    "symbol":"diamond",
                    "symbolSize":10
                },
                {
                    "category":4,
                    "label":"五官科",
                    "name":9,
                    "symbol":"rect",
                    "symbolSize":28
                },
                {
                    "category":4,
                    "label":"中西医结合科",
                    "name":10,
                    "symbol":"rect",
                    "symbolSize":28
                },
                {
                    "category":4,
                    "label":"腹部损伤",
                    "name":11,
                    "symbolSize":28
                },
                {
                    "category":4,
                    "label":"内科",
                    "name":12,
                    "symbol":"rect",
                    "symbolSize":28
                },
                {
                    "category":1,
                    "label":"",
                    "name":13,
                    "symbol":"diamond",
                    "symbolSize":10
                },
                {
                    "category":5,
                    "label":"巨噬细胞或白细胞移动抑制试验mmit",
                    "name":14,
                    "symbolSize":28
                },
                {
                    "category":5,
                    "label":"浆膜腔积液",
                    "name":15,
                    "symbol":"rect",
                    "symbolSize":28
                },
                {
                    "category":5,
                    "label":"浆膜腔积液葡萄糖",
                    "name":16,
                    "symbol":"rect",
                    "symbolSize":28
                },
                {
                    "category":5,
                    "label":"结核菌素试验（OT,PPD）",
                    "name":17,
                    "symbol":"rect",
                    "symbolSize":28
                },
                {
                    "category":1,
                    "label":"",
                    "name":18,
                    "symbol":"diamond",
                    "symbolSize":10
                },
                {
                    "category":6,
                    "label":"HIV相关呼吸道感染",
                    "name":19,
                    "symbolSize":28
                },
                {
                    "category":6,
                    "label":"热带型肺嗜酸性粒细胞肺炎",
                    "name":20,
                    "symbolSize":28
                }
            ],
            links: [
                {
                    "source":0,
                    "target":1,
                    "value":"相关症状"
                },
                {
                    "source":1,
                    "target":2,
                    "value":""
                },
                {
                    "source":1,
                    "target":3,
                    "value":""
                },
                {
                    "source":1,
                    "target":4,
                    "value":""
                },
                {
                    "source":1,
                    "target":5,
                    "value":""
                },
                {
                    "source":0,
                    "target":6,
                    "value":"发病部位"
                },
                {
                    "source":6,
                    "target":7,
                    "value":""
                },
                {
                    "source":0,
                    "target":8,
                    "value":"所属科室"
                },
                {
                    "source":8,
                    "target":9,
                    "value":""
                },
                {
                    "source":8,
                    "target":10,
                    "value":""
                },
                {
                    "source":8,
                    "target":11,
                    "value":""
                },
                {
                    "source":8,
                    "target":12,
                    "value":""
                },
                {
                    "source":0,
                    "target":13,
                    "value":"检查"
                },
                {
                    "source":13,
                    "target":14,
                    "value":""
                },
                {
                    "source":13,
                    "target":15,
                    "value":""
                },
                {
                    "source":13,
                    "target":16,
                    "value":""
                },
                {
                    "source":13,
                    "target":17,
                    "value":""
                },
                {
                    "source":0,
                    "target":18,
                    "value":"相关疾病"
                },
                {
                    "source":18,
                    "target":19,
                    "value":""
                },
                {
                    "source":18,
                    "target":20,
                    "value":""
                }
            ],
            categories: categories,
        }]
    };

    $("#search").click(function() {
        var data = {};
        data.labelName = $("#sel").val();
        data.inputStr = $("#inputStr").val().trim();
        $.ajax({
            type: "post",
            url: "/kg/getTu",
            data: JSON.stringify(data),
            contentType: "application/json;charset=UTF-8",
            dataType: "json",
            success: function(res){
                console.log(res);
                var data = res.data;
                option.series[0].data = data.nodeList;
                option.series[0].links = data.linksList;
                option.series[0].categories = data.categoriesList;
                option.legend[0].data = data.categoriesList.slice(2, data.categoriesList.length);
                myChart.setOption(option);
            }
        });
    });
    myChart.on('click', function (param){
        console.log('param---->', param);  // 打印出param, 可以看到里边有很多参数可以使用
        //获取节点点击的数组序号
        var arrayIndex = param.dataIndex;
        if (param.dataType == 'node' && !param.data.symbol) {
            var data = {};
            // data.labelName = $("#sel").val();
            data.labelName = param.data.type;
            data.inputStr = param.data.label.trim();
            $.ajax({
                type: "post",
                url: "/kg/getTu",
                data: JSON.stringify(data),
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function(res){
                    console.log(res);
                    var data = res.data;
                    option.series[0].data = data.nodeList;
                    option.series[0].links = data.linksList;
                    option.series[0].categories = data.categoriesList;
                    option.legend[0].data = data.categoriesList.slice(2, data.categoriesList.length);
                    myChart.setOption(option);
                }
            });
        }
    });

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