ecchart关系图展示（知识图谱）

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts 关系图</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src=" https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <!-- 或者 方式三  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js"></script>
    <style>
        #box{
                display:none;
                background-color: lightgoldenrodyellow;
                width: 200px;
                height: 260px;
               position:absolute;
               right:10px;
               top  :150px;
            }
            #box-type{
                display:block;
            }
            #box-name{
                display:block;
            }
            /*#box-index{*/
            /*    display:block;*/
            /*}*/
 
 
			table{/*为页面中所有的table标签添加样式*/
				width: 200px;/*设置table宽度*/
				margin: auto;/*让表格居中显示*/
				border: black 1px  solid;/*添加边框*/
				border-spacing: 0px; /*标签及其子标签边框之间的白色空隙*/
				border-collapse: collapse;/*去掉重合线*/
 
			}
 
			th{/*为页面中所有的th标签添加样式*/
				border: black 1px  solid;/*添加边框*/
			}
			td{/*为页面中所有的td标签添加样式*/
				border: black 1px  solid;/*添加边框*/
			}
 
    </style>
</head>
 
<body>
 
<div>
    <label for="send_content">节点：</label>
    <input id="send1" type="button" value="人物">
    <input id="send2" type="button" value="武器">
    <input id="send3" type="button" value="坐骑">
</div>
<div>
    <label for="send_content">关系：</label>
    <input id="send1_r" type="button" value="属于关系">
    <input id="send2_r" type="button" value="兄弟关系">
    <input id="send3_r" type="button" value="君臣关系">
</div>
<div>
    <label for="send_content">常用查询：</label>
     <input id="send5" type="button" value="人物及其武器">
</div>
 
 
 
<div id="box" draggable="true">
    <table boxtable>
 
    <tr>
        <td style="width: 80px; top: 30px">节点类型:</td>
        <td tyle="top: 30px"><span id="box-type" draggable="true"></span></td>
    </tr>
    <tr>
        <td > </td>
        <td > </td>
    </tr>
    <tr>
        <td style="width: 80px; top: 0px">节点名称:</td>
        <td style="top: 5px"><span id="box-name" draggable="true"></span></td>
    </tr>
 
    </table>
 
 
</div>
 
<div id="main" style="width:1800px;height:900px"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var categories = [{name: '人物'}, {name: '兵器'},{name: '坐骑'},{name: '属于关系'},{name: '君臣关系'},{name: '兄弟关系'}];
 
    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',
            left:'center',
            data: categories.slice(0,3).map(function (a) {
                    return a.name;
            }
            ),
 
        },
            {
            // selectedMode: 'single',
            top:'center',
            left:20,
            orient: 'vertical',
            icon:'diamond',
            data: categories.slice(3,).map(function (a) {
                     return a.name;
            })
        }
            ],
        series: [{
            type: 'graph', // 类型:关系图
            layout: 'force', //图的布局，类型为力导图
            symbolSize: 60, // 调整节点的大小
            roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [2, 10],
            edgeLabel: {
                normal: {
                    textStyle: {
                        fontSize: 15
                    }
                }
            },
            force: {
                repulsion: 2500,
                edgeLength: [10, 50]
            },
            draggable: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: '#4b565b',
                }
            },
            edgeLabel: {
                normal: {
                    show: true,
                    formatter: function (x) {
                        return x.data.name;
                    }
                }
            },
			// 超长的文字换行展示
            label: {
                normal: {
                    show: true,
            formatter: function (param) {
              console.log("text", param)
              let text = param.data.name;
              if (text.length < 18) {
                                if (text.length <= 6) {
                                    return text;
                                } else if (text.length > 6 && text.length <= 12) {
                                    return text = `${text.slice(0, 6)}\n${text.slice(6)}`
                                } else if (text.length > 12 && text.length <= 18) {
                                    return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12, 18)}\n${text.slice(18)}`}
              } else {
                // return text.substring(0, 20) + '...' + '\n'
                  return `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12, 18)}`+ '...' + '\n'
              }
            },
 
            textStyle: {}
                }
            },
 
            // 数据
            data:  [
					{   des: '赤兔马，一日千里 三国时期最著名的坐骑',
						name: '赤兔马',
						symbolSize: 50,
						'category': 2},
					{   des: '青龙偃月刀，关羽武器',
						name: '青龙偃月刀',
						symbolSize: 50,
						'category': 1},
					{   des: '五虎上将之首',
                        name: '关羽',
                        symbolSize: 50,
                        'category': 0},
					{   des: '蜀国老大',
						name: '刘备',
						symbolSize: 50,
						'category': 0},
					{   des: '一身是胆，武艺绝伦',
                        name: '赵云',
                        'category': 0,
                        symbolSize: 50}],
            links: [{   source: '赤兔马',
                        target: '关羽',
                        des: '属于坐骑',
                        'category': 3,
                        name: '属于关系'},
					{   source: '青龙偃月刀',
                        target: '关羽',
                        des: '属于武器',
                        'category': 3,
                        name: '属于关系'},
					{   source: '关羽',
                        target: '刘备',
                        des: '的义兄',
                        'category': 5,
                        name: '兄弟关系'},
					{   source: '赵云',
                        target: '刘备',
                        des: '的主公',
                        'category': 4,
                        name: '君臣关系'}],
            categories: categories,
        }]
    };
    myChart.setOption(option);
 
    myChart.on('click', function (param) {
        console.log('param---->', param);  // 打印出param, 可以看到里边有很多参数可以使用
        //获取节点点击的数组序号
        var arrayIndex = param.dataIndex;
        console.log('arrayIndex---->', arrayIndex);
        console.log('name---->', param.name);
        console.log('data---->', categories[param.data.category]['name']);
        if (param.dataType == 'node') {
            var nodename = param.name;
            // alert("点击了节点" + param.data.name)
             $('#box').attr("style", "display:block;");
             $("#box-type").html(categories[param.data.category]['name']);
             $("#box-name").html(param.data.name);
        } else {
            alert("点击了边" + param.name)
        }
    });
 
 
 
</script>
</body>
</html>复制

在这里插入图片描述

ecchart关系图展示（知识图谱）

JS jQuery基础2

jQuery实现文件上传

不错的jquery上传插件jQuery File Upload 正确使用方式很全面

jquery上传图片单图多图

Echarts Y轴数值（正负数）转化成万亿单位 (原本的转化有问题，且代码太多，已优化)

echarts的二次封装

echarts图，给x轴设置name后，调整name位置

echarts柱状图实现排序且点击之后动态改变柱子颜色

【前端可视化】ECharts 关系图力导图（知识图谱）类型配置

【vue】echarts的tooltip（提示框）基础配置和样式改写

前端哥

构建ssm项目，使用jquery ajax请求实现单表的增删改查

01-10jQuery框架

基于javaweb mysql的ssm maven超市进销存管理系统(java ssm jsp bootstrap jquery mysql)

JS jQuery基础2

jQuery实现文件上传

基于jQuery框架的文具销售管理系统计算机专业毕业设计源码70886

JQuery简介与解析

不错的jquery上传插件jQuery File Upload 正确使用方式很全面

jquery上传图片单图多图

基于javaweb mysql的jsp servlet人事hr管理系统(java servlet jsp jquery easyui ztree mysql)

1
ECharts 饼状图颜色设置

2024-02-16 14:02:001000

2
echarts实现动态渲染多柱图

2024-02-12 14:02:341000

3
移动端css布局大全

2024-02-06 15:02:421000

4
使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000

5
JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000

6
成都工业学院Web技术基础（WEB）实验一：HTML5排版标签使用

2024-02-27 11:02:41999

7
HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999

8
web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999

9
尚硅谷css3笔记

2024-02-13 10:02:44998

10
如何利用浏览器测试跨域

2024-02-11 10:02:28998

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>ECharts 关系图</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script src=" https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
	<!-- 或者方式三 -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js"></script>
	<style>
	#box{
	display:none;
	background-color: lightgoldenrodyellow;
	width: 200px;
	height: 260px;
	position:absolute;
	right:10px;
	top :150px;
	}
	#box-type{
	display:block;
	}
	#box-name{
	display:block;
	}
	/#box-index{/
	/* display:block;*/
	/}/


	table{/为页面中所有的table标签添加样式/
	width: 200px;/设置table宽度/
	margin: auto;/让表格居中显示/
	border: black 1px solid;/添加边框/
	border-spacing: 0px; /标签及其子标签边框之间的白色空隙/
	border-collapse: collapse;/去掉重合线/

	}

	th{/为页面中所有的th标签添加样式/
	border: black 1px solid;/添加边框/
	}
	td{/为页面中所有的td标签添加样式/
	border: black 1px solid;/添加边框/
	}

	</style>
	</head>

	<body>

	<div>
	<label for="send_content">节点：</label>
	<input id="send1" type="button" value="人物">
	<input id="send2" type="button" value="武器">
	<input id="send3" type="button" value="坐骑">
	</div>
	<div>
	<label for="send_content">关系：</label>
	<input id="send1_r" type="button" value="属于关系">
	<input id="send2_r" type="button" value="兄弟关系">
	<input id="send3_r" type="button" value="君臣关系">
	</div>
	<div>
	<label for="send_content">常用查询：</label>
	<input id="send5" type="button" value="人物及其武器">
	</div>



	<div id="box" draggable="true">
	<table boxtable>

	<tr>
	<td style="width: 80px; top: 30px">节点类型:</td>
	<td tyle="top: 30px"><span id="box-type" draggable="true"></span></td>
	</tr>
	<tr>
	<td > </td>
	<td > </td>
	</tr>
	<tr>
	<td style="width: 80px; top: 0px">节点名称:</td>
	<td style="top: 5px"><span id="box-name" draggable="true"></span></td>
	</tr>

	</table>


	</div>

	<div id="main" style="width:1800px;height:900px"></div>
	<script type="text/javascript">
	var myChart = echarts.init(document.getElementById('main'));
	var categories = [{name: '人物'}, {name: '兵器'},{name: '坐骑'},{name: '属于关系'},{name: '君臣关系'},{name: '兄弟关系'}];

	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',
	left:'center',
	data: categories.slice(0,3).map(function (a) {
	return a.name;
	}
	),

	},
	{
	// selectedMode: 'single',
	top:'center',
	left:20,
	orient: 'vertical',
	icon:'diamond',
	data: categories.slice(3,).map(function (a) {
	return a.name;
	})
	}
	],
	series: [{
	type: 'graph', // 类型:关系图
	layout: 'force', //图的布局，类型为力导图
	symbolSize: 60, // 调整节点的大小
	roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
	edgeSymbol: ['circle', 'arrow'],
	edgeSymbolSize: [2, 10],
	edgeLabel: {
	normal: {
	textStyle: {
	fontSize: 15
	}
	}
	},
	force: {
	repulsion: 2500,
	edgeLength: [10, 50]
	},
	draggable: true,
	lineStyle: {
	normal: {
	width: 2,
	color: '#4b565b',
	}
	},
	edgeLabel: {
	normal: {
	show: true,
	formatter: function (x) {
	return x.data.name;
	}
	}
	},
	// 超长的文字换行展示
	label: {
	normal: {
	show: true,
	formatter: function (param) {
	console.log("text", param)
	let text = param.data.name;
	if (text.length < 18) {
	if (text.length <= 6) {
	return text;
	} else if (text.length > 6 && text.length <= 12) {
	return text = `${text.slice(0, 6)}\n${text.slice(6)}`
	} else if (text.length > 12 && text.length <= 18) {
	return text = `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12, 18)}\n${text.slice(18)}`}
	} else {
	// return text.substring(0, 20) + '...' + '\n'
	return `${text.slice(0, 6)}\n${text.slice(6, 12)}\n${text.slice(12, 18)}`+ '...' + '\n'
	}
	},

	textStyle: {}
	}
	},

	// 数据
	data: [
	{ des: '赤兔马，一日千里三国时期最著名的坐骑',
	name: '赤兔马',
	symbolSize: 50,
	'category': 2},
	{ des: '青龙偃月刀，关羽武器',
	name: '青龙偃月刀',
	symbolSize: 50,
	'category': 1},
	{ des: '五虎上将之首',
	name: '关羽',
	symbolSize: 50,
	'category': 0},
	{ des: '蜀国老大',
	name: '刘备',
	symbolSize: 50,
	'category': 0},
	{ des: '一身是胆，武艺绝伦',
	name: '赵云',
	'category': 0,
	symbolSize: 50}],
	links: [{ source: '赤兔马',
	target: '关羽',
	des: '属于坐骑',
	'category': 3,
	name: '属于关系'},
	{ source: '青龙偃月刀',
	target: '关羽',
	des: '属于武器',
	'category': 3,
	name: '属于关系'},
	{ source: '关羽',
	target: '刘备',
	des: '的义兄',
	'category': 5,
	name: '兄弟关系'},
	{ source: '赵云',
	target: '刘备',
	des: '的主公',
	'category': 4,
	name: '君臣关系'}],
	categories: categories,
	}]
	};
	myChart.setOption(option);

	myChart.on('click', function (param) {
	console.log('param---->', param); // 打印出param, 可以看到里边有很多参数可以使用
	//获取节点点击的数组序号
	var arrayIndex = param.dataIndex;
	console.log('arrayIndex---->', arrayIndex);
	console.log('name---->', param.name);
	console.log('data---->', categories[param.data.category]['name']);
	if (param.dataType == 'node') {
	var nodename = param.name;
	// alert("点击了节点" + param.data.name)
	$('#box').attr("style", "display:block;");
	$("#box-type").html(categories[param.data.category]['name']);
	$("#box-name").html(param.data.name);
	} else {
	alert("点击了边" + param.name)
	}
	});



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

ecchart关系图展示（知识图谱）

微信扫一扫：分享