Echarts-实现结直肠癌知识图谱可视化

最新推荐文章于 2025-03-29 13:18:37 发布

牛小冲

最新推荐文章于 2025-03-29 13:18:37 发布

阅读量4.3k

点赞数 3

分类专栏：知识图谱

本文链接：https://blog.csdn.net/weixin_37665090/article/details/99415102

版权

- 知识图谱可视化的方法
在这里插入图片描述

- Echarts下载

下载地址：https://echarts.baidu.com/download.html
这里选择下载最新的github版本，zip格式
在这里插入图片描述

- 零基础使用Echarts
1.解压以上下载好的文件；
2.在dist文件夹中新建一个HTML；
这里使用sublime text 3 新建HTML文件（sublime text 3下载，安装插件，新建html）
3.技巧：拷贝Echarts实例（example）开源代码
在Echarts的主页，选择“文档—教程”，就可以看到《5 分钟上手 ECharts》，把示例代码复制到HTML中保存，再用浏览器打开即可看到图表，其基本代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

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

这里，参考ECharts 实现人民的名义关系图谱，作者：Emrys ，出处：http://www.cnblogs.com/emrys5/

- 构建结直肠癌本体
参考资料：
1.中国结直肠癌诊疗规范；
2.结直肠癌ICD-10疾病分类；
3.结直肠癌标准数据集。
这里，未将具体的疾病，症状，检验，检查，治疗等关联起来，只实现展示主要的本体层概念。

- 利用Echarts实现结直肠癌知识图谱可视化

配置关系图
首先配置series的type为graph，layout为force，即采用力引导布局。layout可以选择none、circular和force。详见官方文档，设置节点、边、文本标签等。
设置鼠标移动到节点处显示节点简介tooltip

tooltip: {
                formatter: function (x) {
                    return x.data.des;
                }
            },

鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点

focusNodeAdjacency : true

数据

                          {
                            name: '结直肠癌',
                            des: '胃肠道中常见的一种恶性肿瘤',
                            symbolSize: 80,
                            itemStyle: {
                                normal: {
                                    color: '#ef5350'
                                }
                            }
                        }

关系

                       {
                            source: '临床表现',target: '结直肠癌'
                        },

全部代码

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,  minimum-scale=1, maximum-scale=1,user-scalable=no" />
    <title>结直肠癌知识图谱</title>
    <meta name="viewport" content="width=1250" /> 
    <script src="jquery-1.10.2.min.js"></script>
    <script src="echarts.min.js"></script>
    <style type="text/css">
        html, body, #main { height: 100%; width: 100%; margin: 0; padding: 0 }
        .nav{margin-left: auto; margin-right: auto; width:64px background-color: gray }
    </style>
</head>
<body>
	<div id="header" style=" background-color: #7986cb !important; color: #fff;">
		<img class="logo" src="./logo.png" style="max-height: 31px; float:left;padding: 12px 30px; ">
	<h1 style="margin:0;font-size: 23px; padding: 10px 150px;font-family:  ">
	结直肠癌知识图谱 </h1></div>
    <div id="main" style="margin: 10px auto; width: 1050px; height: calc( 100vh - 100px ); overflow: hidden; border: 1px solid #CCC; border-radius: 10px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        option = {
            
            tooltip: {
                formatter: function (x) {
                    return x.data.des;
                }
            },


            series: [
                {
                    type: 'graph',
                    layout: 'force',
                    symbolSize: 65,
                    roam: true,
                    
                    edgeSymbolSize: [4, 10],
                    edgeLabel: {
                        normal: {
                            textStyle: {
                                fontSize: 20
                            }
                        }
                    },
                    force: {
                        repulsion: 1550,
                        gravity : 0.95,
                        edgeLength: [10, 50]
                    },
                    draggable: true,
                    focusNodeAdjacency : true,
                    itemStyle: {
                        normal: {
                            color: '#4b565b',
                            borderColor : 'rgba(255,215,0,0.5)',
                            borderWidth : 2,
                            opacity : 0.99 
                        }
                    },
                    lineStyle: {
                        normal: {
                            width: 2
                        }
                    },
                    edgeLabel: {
                        normal: {
                            show: false,
                            formatter: function (x) {
                                return x.data.name;
                            }
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position : 'inside',
                            textStyle: {
                            	color : '#4b565b', 
                            	fontSize: 12
                            }
                        }
                    },

                    data: [
                        {
                            name: '结直肠癌',
                            des: '胃肠道中常见的一种恶性肿瘤',
                            symbolSize: 80,
                            itemStyle: {
                                normal: {
                                    color: '#ef5350'
                                }
                            }
                        }, {
                            name: '临床表现',
                            symbolSize: 65,
                            itemStyle: {
                                normal: {
                                    color: 'orange'
                                }
                            }
                        }, {
                            name: '排便习惯改变',
                            symbolSize: 50,
                            itemStyle: {normal: {color: '#82b1ff'}}
                        }, {
                            name: '大便性状改变',
                            symbolSize: 50,
                            itemStyle: {normal: {color: '#82b1ff'}}
                        }, {
                            name: '腹痛或腹部不适',
                            symbolSize: 50,
                            itemStyle: {normal: {color: '#82b1ff'}}
                        }, {
                            name: '腹部肿块',
                            symbolSize: 50,
                            itemStyle: {normal: {color: '#82b1ff'}}
                        }, {
                            name: '肠梗阻相关症状',
                            symbolSize: 50,
                            itemStyle: {normal: {color: '#82b1ff'}}
                        }, {
                            name: '贫血',
                            symbolSize: 50,
                            itemStyle: {normal: {color: '#82b1ff'}}
                        }, {
                            name: '消瘦',
                            symbolSize: 50,
                            itemStyle: {normal: {color: '#82b1ff'}}
                        }, {
                            name: '低热',
                            symbolSize: 50,
                            itemStyle: {normal: {color: '#82b1ff'}}
                        }, {
                            name: '乏力'

最低0.47元/天解锁文章