|
@@ -0,0 +1,442 @@
|
|
|
+<!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: "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);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ myChart.on('click', function (param){
|
|
|
+ console.log('param---->', param); // 打印出param, 可以看到里边有很多参数可以使用
|
|
|
+ //获取节点点击的数组序号
|
|
|
+ var arrayIndex = param.dataIndex;
|
|
|
+ if (param.dataType == 'node') {
|
|
|
+ var data = {};
|
|
|
+ data.labelName = $("#sel").val();
|
|
|
+ data.inputStr = param.data.label.trim();
|
|
|
+ $.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);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|