You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
79 lines
1.7 KiB
79 lines
1.7 KiB
2 weeks ago
|
<template>
|
||
|
|
<!-- 控制面板（可选） -->
|
||
|
|
<!-- <div class="controls">-->
|
||
|
|
<!-- <button @click="toggleLabel">切换节点标签</button>-->
|
||
|
|
<!-- </div>-->
|
||
|
|
|
||
|
|
<!-- 知识图谱 -->
|
||
|
|
<GraphDemo
|
||
|
|
:graph-data="knowledgeData"
|
||
|
|
:node-style="nodeConfig"
|
||
|
|
:edge-style="edgeConfig"
|
||
|
|
ref="graphRef"
|
||
|
|
/>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import GraphDemo from './system/GraphDemo.vue';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'App',
|
||
|
|
components: {
|
||
|
|
GraphDemo
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
knowledgeData: {
|
||
|
|
nodes: [
|
||
|
|
{ id: 'entity1', label: '人工智能', style: { fill: '#FFD700' } },
|
||
|
|
{ id: 'entity2', label: '机器学习', style: { shape: 'rect', size: 80 } },
|
||
|
|
{ id: 'entity3', label: '深度学习' }
|
||
|
|
],
|
||
|
|
edges: [
|
||
|
|
{ source: 'entity1', target: 'entity2', label: '包含' },
|
||
|
|
{ source: 'entity2', target: 'entity3', label: '子领域' }
|
||
|
|
]
|
||
|
|
},
|
||
|
|
nodeConfig: {
|
||
|
|
shape: 'circle',
|
||
|
|
size: 70,
|
||
|
|
fill: '#9FD5FF',
|
||
|
|
stroke: '#5B8FF9',
|
||
|
|
lineWidth: 2,
|
||
|
|
showLabel: true,
|
||
|
|
labelFontFamily: 'Microsoft YaHei',
|
||
|
|
labelFontSize: 16,
|
||
|
|
labelColor: '#333'
|
||
|
|
},
|
||
|
|
edgeConfig: {
|
||
|
|
type: 'quadratic', // 曲线
|
||
|
|
stroke: '#666',
|
||
|
|
lineWidth: 2,
|
||
|
|
endArrow: true,
|
||
|
|
showLabel: true,
|
||
|
|
labelFontFamily: 'Microsoft YaHei',
|
||
|
|
labelFontSize: 14,
|
||
|
|
labelColor: '#888'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
toggleLabel() {
|
||
|
|
this.nodeConfig.showLabel = !this.nodeConfig.showLabel
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
#app {
|
||
|
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
-moz-osx-font-smoothing: grayscale;
|
||
|
|
text-align: center;
|
||
|
|
color: #2c3e50;
|
||
|
|
}
|
||
|
|
</style>
|