25 changed files with 3203 additions and 76 deletions
-
2.env.development
-
1.env.production
-
1package.json
-
19src/views/AIAssistant/AIDigitalHuman/index.vue
-
6src/views/AIAssistant/AIknowledgeGraph/index.vue
-
16src/views/archivesManage/managementLibrary/anjuan/tableList.vue
-
16src/views/archivesManage/managementLibrary/file/index.vue
-
16src/views/archivesManage/managementLibrary/juannei/index.vue
-
16src/views/archivesManage/managementLibrary/project/index.vue
-
7src/views/archivesStatistics/ureport/designer/index.vue
-
16src/views/collectReorganizi/collectionLibrary/anjuan/tableList.vue
-
16src/views/collectReorganizi/collectionLibrary/file/index.vue
-
16src/views/collectReorganizi/collectionLibrary/juannei/index.vue
-
1src/views/collectReorganizi/collectionLibrary/mixins/index.js
-
16src/views/collectReorganizi/collectionLibrary/project/index.vue
-
1744src/views/components/echarts/data.json
-
150src/views/components/echarts/graph-relation.vue
-
252src/views/components/echarts/graph.vue
-
160src/views/components/echarts/graph1.vue
-
85src/views/components/echarts/graph2.vue
-
253src/views/components/echarts/graph4.vue
-
217src/views/components/echarts/graph5.vue
-
219src/views/components/echarts/graph6.vue
-
6src/views/system/archivesCategory/index.vue
-
28src/views/system/role/index.vue
1744
src/views/components/echarts/data.json
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,150 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div ref="myPage" style="height:calc(100vh);"> |
||||
|
<RelationGraph |
||||
|
ref="graphRef" |
||||
|
:options="graphOptions" |
||||
|
:on-node-click="onNodeClick" |
||||
|
:on-line-click="onLineClick" |
||||
|
> |
||||
|
<template #node="{node}"> |
||||
|
<div @mouseover="showNodeTips(node, $event)" @mouseout="hideNodeTips(node, $event)"> |
||||
|
<div class="c-my-rg-node"> |
||||
|
<i style="font-size: 30px;" :class="node.data.myicon" /> |
||||
|
</div> |
||||
|
<div style="color: forestgreen;font-size: 16px;position: absolute;width: 160px;height:25px;line-height: 25px;margin-top:5px;margin-left:-48px;text-align: center;background-color: rgba(66,187,66,0.2);"> |
||||
|
{{ node.text }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</RelationGraph> |
||||
|
<div v-if="isShowNodeTipsPanel" :style="{left: nodeMenuPanelPosition.x + 'px', top: nodeMenuPanelPosition.y + 'px' }" style="z-index: 999;padding:10px;background-color: #ffffff;border:#eeeeee solid 1px;box-shadow: 0px 0px 8px #cccccc;position: absolute;"> |
||||
|
<div style="line-height: 25px;padding-left: 10px;color: #888888;font-size: 12px;">节点名称：{{ currentNode.text }}</div> |
||||
|
<div class="c-node-menu-item">id:{{ currentNode.text }}</div> |
||||
|
<div class="c-node-menu-item">图标:{{ currentNode.data.myicon }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// 如果您没有在main.js文件中使用Vue.use(RelationGraph); 就需要使用下面这一行代码来引入relation-graph |
||||
|
import RelationGraph from 'relation-graph' |
||||
|
export default { |
||||
|
name: 'Demo', |
||||
|
components: { RelationGraph }, |
||||
|
data() { |
||||
|
return { |
||||
|
isShowCodePanel: false, |
||||
|
isShowNodeTipsPanel: false, |
||||
|
nodeMenuPanelPosition: { x: 0, y: 0 }, |
||||
|
currentNode: {}, |
||||
|
graphOptions: { |
||||
|
allowSwitchLineShape: true, |
||||
|
allowSwitchJunctionPoint: true, |
||||
|
defaultNodeColor: 'rgba(66,187,66,1)', |
||||
|
defaultJunctionPoint: 'border' |
||||
|
// 这里可以参考"Graph 图谱"中的参数进行设置 |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.showGraph() |
||||
|
}, |
||||
|
methods: { |
||||
|
// https://relation-graph.com/#/docs/start |
||||
|
showGraph() { |
||||
|
const __graph_json_data = { |
||||
|
rootId: '1', |
||||
|
nodes: [ |
||||
|
// 注意：在节点配置信息中，你的自定义属性需要像下面这样放到data标签中，否则数据会丢失 |
||||
|
{ id: '1', text: '文书档案', data: { myicon: 'el-icon-star-on' }}, |
||||
|
|
||||
|
{ id: '2', text: '档案分类', data: { myicon: 'el-icon-star-on' }}, |
||||
|
{ id: '21', text: '行政管理', data: { myicon: 'el-icon-setting' }}, |
||||
|
{ id: '22', text: '党群工作', data: { myicon: 'el-icon-setting' }}, |
||||
|
{ id: '23', text: '经营管理', data: { myicon: 'el-icon-setting' }}, |
||||
|
{ id: '24', text: '生成管理', data: { myicon: 'el-icon-setting' }}, |
||||
|
|
||||
|
{ id: '3', text: '保管期限', data: { myicon: 'el-icon-star-on' }}, |
||||
|
{ id: '31', text: '永久', data: { myicon: 'el-icon-setting' }}, |
||||
|
{ id: '32', text: '定期30年', data: { myicon: 'el-icon-setting' }}, |
||||
|
{ id: '33', text: '定期10年', data: { myicon: 'el-icon-setting' }}, |
||||
|
|
||||
|
{ id: '4', text: '年度', data: { myicon: 'el-icon-star-on' }}, |
||||
|
{ id: '41', text: '2022', data: { myicon: 'el-icon-s-promotion' }}, |
||||
|
{ id: '42', text: '2023', data: { myicon: 'el-icon-s-promotion' }}, |
||||
|
{ id: '43', text: '2024', data: { myicon: 'el-icon-s-promotion' }}, |
||||
|
|
||||
|
{ id: '5', text: '密级', data: { myicon: 'el-icon-star-on' }}, |
||||
|
{ id: '51', text: '公开', data: { myicon: 'el-icon-sunny' }}, |
||||
|
{ id: '52', text: '限制', data: { myicon: 'el-icon-sunny' }}, |
||||
|
{ id: '53', text: '秘密', data: { myicon: 'el-icon-sunny' }}, |
||||
|
{ id: '54', text: '机密', data: { myicon: 'el-icon-sunny' }}, |
||||
|
{ id: '55', text: '绝密', data: { myicon: 'el-icon-sunny' }} |
||||
|
], |
||||
|
lines: [ |
||||
|
{ from: '1', to: '2', text: 'class' }, |
||||
|
{ from: '1', to: '3', text: 'retention' }, |
||||
|
{ from: '1', to: '4', text: 'year' }, |
||||
|
{ from: '1', to: '5', text: 'classification' }, |
||||
|
{ from: '2', to: '21', text: 'class_01' }, |
||||
|
{ from: '2', to: '22', text: 'class_02' }, |
||||
|
{ from: '2', to: '23', text: 'class_03' }, |
||||
|
{ from: '2', to: '24', text: 'class_04' }, |
||||
|
{ from: '3', to: '31', text: 'retention_01' }, |
||||
|
{ from: '3', to: '32', text: 'retention_02' }, |
||||
|
{ from: '3', to: '33', text: 'retention_03' }, |
||||
|
{ from: '4', to: '41', text: 'year_01' }, |
||||
|
{ from: '4', to: '42', text: 'year_02' }, |
||||
|
{ from: '4', to: '43', text: 'year_03' }, |
||||
|
{ from: '5', to: '51', text: 'classification_01' }, |
||||
|
{ from: '5', to: '52', text: 'classification_02' }, |
||||
|
{ from: '5', to: '53', text: 'classification_03' }, |
||||
|
{ from: '5', to: '54', text: 'classification_04' }, |
||||
|
{ from: '5', to: '55', text: 'classification_05' } |
||||
|
] |
||||
|
} |
||||
|
this.$refs.graphRef.setJsonData(__graph_json_data, (graphInstance) => { |
||||
|
// 这些写上当图谱初始化完成后需要执行的代码 |
||||
|
}) |
||||
|
}, |
||||
|
onNodeClick(nodeObject, $event) { |
||||
|
console.log('onNodeClick:', nodeObject) |
||||
|
}, |
||||
|
onLineClick(lineObject, linkObject, $event) { |
||||
|
console.log('onLineClick:', lineObject) |
||||
|
}, |
||||
|
showNodeTips(nodeObject, $event) { |
||||
|
this.currentNode = nodeObject |
||||
|
const _base_position = this.$refs.myPage.getBoundingClientRect() |
||||
|
console.log('showNodeMenus:', $event.clientX, $event.clientY, _base_position) |
||||
|
this.isShowNodeTipsPanel = true |
||||
|
this.nodeMenuPanelPosition.x = $event.clientX - _base_position.x + 10 |
||||
|
this.nodeMenuPanelPosition.y = $event.clientY - _base_position.y + 10 |
||||
|
}, |
||||
|
hideNodeTips(nodeObject, $event) { |
||||
|
this.isShowNodeTipsPanel = false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
|
||||
|
</style> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.c-my-rg-node { |
||||
|
height:80px;line-height: 80px;border-radius: 50%;cursor: pointer; |
||||
|
display: flex; |
||||
|
place-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
.c-node-menu-item{ |
||||
|
line-height: 30px;padding-left: 10px;cursor: pointer;color: #444444;font-size: 14px;border-top:#efefef solid 1px; |
||||
|
} |
||||
|
.c-node-menu-item:hover{ |
||||
|
background-color: rgba(66,187,66,0.2); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,252 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div ref="myPage" class="my-graph" style="height: calc(100vh - 184px);"> |
||||
|
|
||||
|
<RelationGraph |
||||
|
ref="graphRef" |
||||
|
:options="graphOptions" |
||||
|
:on-node-click="onNodeClick" |
||||
|
:on-line-click="onLineClick" |
||||
|
:on-canvas-click="onCanvasClick" |
||||
|
> |
||||
|
<template #node="{node}"> |
||||
|
<div @mouseover="showNodeTips(node, $event)" @mouseout="hideNodeTips(node, $event)"> |
||||
|
<div :class="node.id === 1 ? 'c-my-rg-node c-big-style': 'c-my-rg-node '" :style="{'height': node.width + 'px', 'line-height': node.width + 'px'}"> |
||||
|
{{ node.size }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<template #graph-plug> |
||||
|
<!-- <div |
||||
|
style="position:absolute;z-index:700;left:20px;top:20px;height:70px;padding: 20px;border: #efefef solid 1px;color: #555555;border-radius: 10px;background-color: rgba(255,255,255,0.79);font-size: 12px;" |
||||
|
/> --> |
||||
|
<div v-if="isShowNodeTipsPanel" :style="{left: nodeMenuPanelPosition.x + 'px', top: nodeMenuPanelPosition.y + 'px' }" style="z-index: 999;padding:10px;background-color: #ffffff;border:#eeeeee solid 1px;box-shadow: 0px 0px 8px #cccccc;position: absolute;"> |
||||
|
<div style="line-height: 25px;padding-left: 10px;color: #888888;font-size: 12px;">节点名称：{{ currentNode.text }}</div> |
||||
|
<div class="c-node-menu-item">id:{{ currentNode.id }}</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</RelationGraph> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import RelationGraph from 'relation-graph' |
||||
|
const __graph_json_data_small = { |
||||
|
'rootId': '1', |
||||
|
'nodes': [ |
||||
|
{ id: '1', text: '文书档案', force_weight: 10000, color: '#ec6941', borderColor: '#ff875e', width: 150, height: 150 }, |
||||
|
|
||||
|
{ id: '2', text: '档案分类' }, |
||||
|
{ id: '21', text: '行政管理' }, |
||||
|
{ id: '22', text: '党群工作' }, |
||||
|
{ id: '23', text: '经营管理' }, |
||||
|
{ id: '24', text: '生成管理' }, |
||||
|
|
||||
|
{ id: '3', text: '保管期限' }, |
||||
|
{ id: '31', text: '永久' }, |
||||
|
{ id: '32', text: '定期30年' }, |
||||
|
{ id: '33', text: '定期10年' }, |
||||
|
|
||||
|
{ id: '4', text: '年度' }, |
||||
|
{ id: '41', text: '2022' }, |
||||
|
{ id: '42', text: '2023' }, |
||||
|
{ id: '43', text: '2024' }, |
||||
|
|
||||
|
{ id: '5', text: '密级' }, |
||||
|
{ id: '51', text: '公开' }, |
||||
|
{ id: '52', text: '限制' }, |
||||
|
{ id: '53', text: '秘密' }, |
||||
|
{ id: '54', text: '机密' }, |
||||
|
{ id: '55', text: '绝密' } |
||||
|
], |
||||
|
'lines': [ |
||||
|
{ from: '1', to: '2', text: 'class', dashType: 1 }, |
||||
|
{ from: '1', to: '3', text: 'retention', dashType: 2 }, |
||||
|
{ from: '1', to: '4', text: 'year', dashType: 3 }, |
||||
|
{ from: '1', to: '5', text: 'classification', dashType: 4 }, |
||||
|
{ from: '2', to: '21', text: 'class_01' }, |
||||
|
{ from: '2', to: '22', text: 'class_02' }, |
||||
|
{ from: '2', to: '23', text: 'class_03' }, |
||||
|
{ from: '2', to: '24', text: 'class_04' }, |
||||
|
{ from: '3', to: '31', text: 'retention_01' }, |
||||
|
{ from: '3', to: '32', text: 'retention_02' }, |
||||
|
{ from: '3', to: '33', text: 'retention_03' }, |
||||
|
{ from: '4', to: '41', text: 'year_01' }, |
||||
|
{ from: '4', to: '42', text: 'year_02' }, |
||||
|
{ from: '4', to: '43', text: 'year_03' }, |
||||
|
{ from: '5', to: '51', text: 'classification_01' }, |
||||
|
{ from: '5', to: '52', text: 'classification_02' }, |
||||
|
{ from: '5', to: '53', text: 'classification_03' }, |
||||
|
{ from: '5', to: '54', text: 'classification_04' }, |
||||
|
{ from: '5', to: '55', text: 'classification_05' } |
||||
|
] |
||||
|
} |
||||
|
export default { |
||||
|
name: 'Demo', |
||||
|
components: { RelationGraph }, |
||||
|
data() { |
||||
|
return { |
||||
|
allData: __graph_json_data_small, |
||||
|
isShowCodePanel: false, |
||||
|
isShowNodeTipsPanel: false, |
||||
|
nodeMenuPanelPosition: { x: 0, y: 0 }, |
||||
|
currentNode: {}, |
||||
|
graphOptions: { |
||||
|
defaultNodeBorderWidth: 0, |
||||
|
allowSwitchLineShape: true, |
||||
|
allowSwitchJunctionPoint: true, |
||||
|
defaultLineShape: 1, |
||||
|
disableNodeclickEffect: true, |
||||
|
layout: { |
||||
|
label: '自动布局', |
||||
|
layoutName: 'force', |
||||
|
layoutClassName: 'seeks-layout-force' |
||||
|
}, |
||||
|
// defaultJunctionPoint: 'border', |
||||
|
defaultLineColor: 'rgba(0,0,0,0.8)' |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.showGraph() |
||||
|
this.resizeTimer = setInterval(async() => { |
||||
|
// const graphInstance = this.$refs.graphRef.getInstance(); |
||||
|
// await graphInstance.zoomToFit(); |
||||
|
}, 3000) |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
console.log('beforeDestroy:clear timer') |
||||
|
clearInterval(this.resizeTimer) |
||||
|
}, |
||||
|
methods: { |
||||
|
async showGraph() { |
||||
|
// const data = __graph_json_data_small |
||||
|
const graphInstance = this.$refs.graphRef.getInstance() |
||||
|
await this.stopForceIfNeed() |
||||
|
await graphInstance.setJsonData(this.allData) |
||||
|
// if (this.useBigData) { |
||||
|
// await graphInstance.setZoom(30) |
||||
|
// } else { |
||||
|
// await graphInstance.setZoom(80) |
||||
|
// } |
||||
|
}, |
||||
|
async stopForceIfNeed() { |
||||
|
const graphInstance = this.$refs.graphRef.getInstance() |
||||
|
await graphInstance.stopAutoLayout() |
||||
|
}, |
||||
|
async updateLayouterOptions() { |
||||
|
await this.stopForceIfNeed() |
||||
|
const graphInstance = this.$refs.graphRef.getInstance() |
||||
|
graphInstance.layouter.maxLayoutTimes = this.graphOptions.layout.maxLayoutTimes |
||||
|
graphInstance.layouter.force_node_repulsion = this.graphOptions.layout.force_node_repulsion |
||||
|
graphInstance.layouter.force_line_elastic = this.graphOptions.layout.force_line_elastic |
||||
|
setTimeout(async() => { |
||||
|
await graphInstance.startAutoLayout() |
||||
|
}, 500) |
||||
|
}, |
||||
|
onNodeClick(nodeObject, $event) { |
||||
|
console.log('onNodeClick:', nodeObject) |
||||
|
const allChildIds = this.deepGeAlltChildIds(nodeObject) |
||||
|
const graphInstance = this.$refs.graphRef.getInstance() |
||||
|
for (const node of graphInstance.getNodes()) { |
||||
|
if (allChildIds.includes(node.id)) { |
||||
|
node.opacity = 1 |
||||
|
node.color = 'rgb(116,2,173)' |
||||
|
} else { |
||||
|
node.opacity = 0.1 |
||||
|
node.color = undefined |
||||
|
} |
||||
|
} |
||||
|
for (const link of graphInstance.getLinks()) { |
||||
|
if (allChildIds.includes(link.fromNode.id) && allChildIds.includes(link.toNode.id)) { |
||||
|
link.relations.forEach(line => { |
||||
|
line.color = 'rgb(116,2,173)' |
||||
|
}) |
||||
|
} else { |
||||
|
link.relations.forEach(line => { |
||||
|
line.color = '' |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
deepGeAlltChildIds(node, ids = []) { |
||||
|
if (ids.includes(node.id)) return |
||||
|
ids.push(node.id) |
||||
|
for (const cNode of node.lot.childs) { |
||||
|
this.deepGeAlltChildIds(cNode, ids) |
||||
|
} |
||||
|
return ids |
||||
|
}, |
||||
|
onCanvasClick($event) { |
||||
|
console.log('onCanvasClick:') |
||||
|
const graphInstance = this.$refs.graphRef.getInstance() |
||||
|
for (const node of graphInstance.getNodes()) { |
||||
|
console.log('node', node) |
||||
|
node.opacity = 1 |
||||
|
this.allData.nodes.forEach((item, index) => { |
||||
|
if (item.id === node.id) { |
||||
|
node.color = item.color |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
for (const link of graphInstance.getLinks()) { |
||||
|
link.relations.forEach(line => { |
||||
|
line.color = undefined |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
onLineClick(lineObject, linkObject, $event) { |
||||
|
console.log('onLineClick:', lineObject) |
||||
|
}, |
||||
|
showNodeTips(nodeObject, $event) { |
||||
|
this.currentNode = nodeObject |
||||
|
const _base_position = this.$refs.graphRef.getInstance().options.fullscreen ? { x: 0, y: 0 } : this.$refs.myPage.getBoundingClientRect() |
||||
|
console.log('showNodeMenus:', this.$refs.graphRef.getInstance().options.fullscreen, $event.clientX, $event.clientY, _base_position) |
||||
|
this.isShowNodeTipsPanel = true |
||||
|
this.nodeMenuPanelPosition.x = $event.clientX - _base_position.x + 10 |
||||
|
this.nodeMenuPanelPosition.y = $event.clientY - _base_position.y + 10 |
||||
|
}, |
||||
|
hideNodeTips(nodeObject, $event) { |
||||
|
this.isShowNodeTipsPanel = false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
</style> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
::v-deep .rel-toolbar{ |
||||
|
color: #000; |
||||
|
.c-current-zoom{ |
||||
|
color: #000; |
||||
|
} |
||||
|
} |
||||
|
// .my-graph{ |
||||
|
// // background: linear-gradient(to right, rgb(16, 185, 129), rgb(101, 163, 13)); |
||||
|
// } |
||||
|
|
||||
|
.c-my-rg-node { |
||||
|
border-radius: 50%; |
||||
|
cursor: pointer; |
||||
|
height: 80px; |
||||
|
line-height: 80px; |
||||
|
display: flex; |
||||
|
place-items: center; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.c-node-menu-item{ |
||||
|
line-height: 30px;padding-left: 10px;cursor: pointer;color: #444444;font-size: 14px;border-top:#efefef solid 1px; |
||||
|
} |
||||
|
.c-node-menu-item:hover{ |
||||
|
background-color: rgba(66,187,66,0.2); |
||||
|
} |
||||
|
.c-big-style{ |
||||
|
font-size: 30px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,160 @@ |
|||||
|
<template> |
||||
|
<div id="atlasChart" style="width:100%; height: calc(100vh - 184px);" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// import * as echarts from 'echarts' |
||||
|
import echarts from 'echarts' |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
categories: [], |
||||
|
types: ['未作答', '较好', '一般', '较差'], |
||||
|
datas: [ |
||||
|
{ id: '1', name: '集合与逻辑用语', category: 1, url: 'knowMath' }, |
||||
|
{ id: '2', name: '等式与不等式', category: 1, url: 'knowMath' }, |
||||
|
{ id: '3', name: '基本初等函数', category: 1, url: 'knowMath' }, |
||||
|
{ id: '4', name: '三角函数', category: 1, url: 'knowMath' }, |
||||
|
{ id: '5', name: '平面向量', category: 1, url: 'knowMath' }, |
||||
|
{ id: '6', name: '复数', category: 1, url: 'knowMath' }, |
||||
|
{ id: '7', name: '空间向量与立体几何', category: 1, url: 'knowMath' }, |
||||
|
{ id: '8', name: '直线与圆', category: 1, url: 'knowMath' }, |
||||
|
{ id: '9', name: '平面解析几何', category: 1, url: 'knowMath' }, |
||||
|
{ id: '10', name: '数列', category: 1, url: 'knowMath' }, |
||||
|
{ id: '11', name: '导数', category: 1, url: 'knowMath' }, |
||||
|
{ id: '12', name: '计数原理与概率统计', category: 1, url: 'knowMath' } |
||||
|
], |
||||
|
links: [ |
||||
|
{ target: '1', name: 'link02', des: 'link02des' }, |
||||
|
{ target: '2', name: 'link03', des: 'link03des' }, |
||||
|
{ target: '3', name: 'link04', des: 'link05des' }, |
||||
|
{ target: '4', name: 'link04', des: 'link05des' }, |
||||
|
{ target: '5', name: 'link04', des: 'link05des' }, |
||||
|
{ target: '6', name: 'link04', des: 'link05des' }, |
||||
|
{ target: '7', name: 'link04', des: 'link05des' }, |
||||
|
{ target: '8', name: 'link04', des: 'link05des' }, |
||||
|
{ target: '9', name: 'link04', des: 'link05des' }, |
||||
|
{ target: '10', name: 'link04', des: 'link05des' }, |
||||
|
{ target: '11', name: 'link04', des: 'link05des' }, |
||||
|
{ target: '12', name: 'link04', des: 'link05des' } |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.$nextTick(function() { |
||||
|
this.montheahcrt() |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
montheahcrt() { |
||||
|
var myChart = echarts.init(document.getElementById('atlasChart')) |
||||
|
|
||||
|
for (var i = 0; i < this.types.length; i++) { |
||||
|
this.categories[i] = { |
||||
|
name: this.types[i] |
||||
|
} |
||||
|
} |
||||
|
var option = { |
||||
|
animationDurationUpdate: 1500, // 数据更新动画的时长。 |
||||
|
animationEasingUpdate: 'quinticInOut', // 数据更新动画的缓动效果。 |
||||
|
color: ['#008000', '#cc6633', '#c00', '#ccc'], |
||||
|
title: { |
||||
|
text: '掌握情况：', // 正标题 |
||||
|
bottom: '20px', // 上下位置 |
||||
|
left: '20px', // 左右位置 |
||||
|
textStyle: { // 图例文字的样式 |
||||
|
fontSize: 16, |
||||
|
fontWeight: 550, |
||||
|
color: '#666' |
||||
|
} |
||||
|
}, |
||||
|
grid: { |
||||
|
top: 0, |
||||
|
bottom: 0, |
||||
|
left: 0, |
||||
|
right: 0 |
||||
|
}, |
||||
|
legend: [{ |
||||
|
// selectedMode: 'single', |
||||
|
// 图例位置 |
||||
|
bottom: '20px', |
||||
|
left: '120px', |
||||
|
textStyle: { // 图例文字的样式 |
||||
|
fontSize: 16, |
||||
|
fontWeight: 550, |
||||
|
color: '#666' |
||||
|
}, |
||||
|
icon: 'circle', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' |
||||
|
itemGap: 35, // 图例之间的间距 |
||||
|
data: this.categories.map(function(a) { |
||||
|
return a.name |
||||
|
}) |
||||
|
}], |
||||
|
|
||||
|
series: [{ |
||||
|
type: 'graph', // 类型:关系图 |
||||
|
layout: 'force', // 图的布局，类型为力导图 |
||||
|
focusNodeAdjacency: true, // 当鼠标移动到节点上，突出显示节点以及节点的边和邻接节点 |
||||
|
draggable: true, // 指示节点是否可以拖动 |
||||
|
symbolSize: 23, // 调整节点的大小 |
||||
|
roam: 'scale', // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启 |
||||
|
edgeSymbol: ['circle', 'arrow'], // 边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：edgeSymbol: ['circle', 'arrow'] |
||||
|
edgeSymbolSize: [2, 10], // 边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。 |
||||
|
edgeLabel: { |
||||
|
normal: { |
||||
|
show: false, |
||||
|
formatter: function(x) { |
||||
|
return x.data.name |
||||
|
}, |
||||
|
textStyle: { |
||||
|
fontSize: 14, |
||||
|
color: '#000' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
force: { // 力引导图基本配置 |
||||
|
layoutAnimation: true, |
||||
|
// xAxisIndex : 0, //x轴坐标 有多种坐标系轴坐标选项 |
||||
|
// yAxisIndex : 0, //y轴坐标 |
||||
|
gravity: 0.02, // 节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。 |
||||
|
edgeLength: 30, // 边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长 |
||||
|
repulsion: 300 // 节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。 |
||||
|
// repulsion: 3000, //节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。 |
||||
|
// edgeLength: 80 //边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长 |
||||
|
}, |
||||
|
lineStyle: { |
||||
|
normal: { |
||||
|
width: 1, |
||||
|
color: '#4b565b', |
||||
|
// color: 'target', // 决定边的颜色是与起点相同还是与终点相同 |
||||
|
curveness: 0.1, |
||||
|
type: 'dashed' // 'dotted'点型虚线 'solid'实线 'dashed'线性虚线 |
||||
|
} |
||||
|
}, |
||||
|
label: { |
||||
|
show: true, |
||||
|
position: 'top', |
||||
|
formatter: '{b}', |
||||
|
textStyle: { |
||||
|
fontSize: 16, |
||||
|
fontWeight: 600, |
||||
|
color: '#666' |
||||
|
} |
||||
|
}, |
||||
|
// 数据 |
||||
|
data: this.datas, |
||||
|
links: this.links, |
||||
|
categories: this.categories |
||||
|
}] |
||||
|
} |
||||
|
myChart.setOption(option) |
||||
|
window.addEventListener('resize', function() { |
||||
|
myChart.resize() |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
</style> |
||||
@ -0,0 +1,85 @@ |
|||||
|
<template> |
||||
|
<div id="atlasChart" style="width:100%; height: calc(100vh - 184px);" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// import * as echarts from 'echarts' |
||||
|
import echarts from 'echarts' |
||||
|
require('echarts/theme/macarons') |
||||
|
import data from './data.json' |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
datas: data |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.$nextTick(function() { |
||||
|
this.montheahcrt() |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
montheahcrt() { |
||||
|
var myChart = echarts.init(document.getElementById('atlasChart')) |
||||
|
|
||||
|
this.datas.nodes.forEach(function(node) { |
||||
|
node.label = { |
||||
|
show: node.symbolSize > 30 |
||||
|
} |
||||
|
}) |
||||
|
var option = { |
||||
|
title: { |
||||
|
text: '', |
||||
|
subtext: '', |
||||
|
top: 'bottom', |
||||
|
left: 'right' |
||||
|
}, |
||||
|
tooltip: {}, |
||||
|
legend: [ |
||||
|
{ |
||||
|
// selectedMode: 'single', |
||||
|
data: this.datas.categories.map(function(a) { |
||||
|
return a.name |
||||
|
}) |
||||
|
} |
||||
|
], |
||||
|
animationDuration: 1500, |
||||
|
animationEasingUpdate: 'quinticInOut', |
||||
|
series: [ |
||||
|
{ |
||||
|
name: 'Les Miserables', |
||||
|
type: 'graph', |
||||
|
legendHoverLink: false, |
||||
|
layout: 'none', |
||||
|
data: this.datas.nodes, |
||||
|
links: this.datas.links, |
||||
|
categories: this.datas.categories, |
||||
|
roam: true, |
||||
|
label: { |
||||
|
position: 'right', |
||||
|
formatter: '{b}' |
||||
|
}, |
||||
|
lineStyle: { |
||||
|
color: 'source', |
||||
|
curveness: 0.3 |
||||
|
}, |
||||
|
emphasis: { |
||||
|
focus: 'adjacency', |
||||
|
lineStyle: { |
||||
|
width: 10 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
myChart.setOption(option) |
||||
|
window.addEventListener('resize', function() { |
||||
|
myChart.resize() |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
</style> |
||||
@ -0,0 +1,253 @@ |
|||||
|
<template> |
||||
|
<div id="chart" class="chart" /> |
||||
|
</template> |
||||
|
<script> |
||||
|
// import { expendNodes } from './mock' |
||||
|
var echarts = require('echarts/lib/echarts') |
||||
|
require('echarts/lib/chart/graph') |
||||
|
require('echarts/lib/component/tooltip') |
||||
|
require('echarts/lib/component/title') |
||||
|
|
||||
|
const data = [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
name: '测试节点', |
||||
|
categary: '1', |
||||
|
symbolSize: 60 |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
name: '测试节点', |
||||
|
categary: '1', |
||||
|
symbolSize: 40 |
||||
|
}, |
||||
|
{ |
||||
|
id: 3, |
||||
|
name: '测试节点', |
||||
|
categary: '2' |
||||
|
}, |
||||
|
{ |
||||
|
id: 4, |
||||
|
name: '测试节点', |
||||
|
categary: '' |
||||
|
}, |
||||
|
{ |
||||
|
id: 5, |
||||
|
name: '测试节点测试节点', |
||||
|
categary: '' |
||||
|
}, |
||||
|
{ |
||||
|
id: 6, |
||||
|
name: '测试节点', |
||||
|
categary: '2' |
||||
|
}, |
||||
|
{ |
||||
|
id: 7, |
||||
|
name: '测试节点', |
||||
|
categary: '' |
||||
|
}, |
||||
|
{ |
||||
|
id: 8, |
||||
|
name: '测试节点', |
||||
|
categary: '' |
||||
|
}, |
||||
|
{ |
||||
|
id: 9, |
||||
|
name: '测试节点', |
||||
|
categary: '' |
||||
|
}, |
||||
|
{ |
||||
|
id: 10, |
||||
|
name: '测试节点', |
||||
|
categary: '' |
||||
|
} |
||||
|
] |
||||
|
// 节点连线 |
||||
|
const linkData = [ |
||||
|
{ source: '2', target: '3', name: '' }, |
||||
|
{ source: '3', target: '4', name: '' }, |
||||
|
{ source: '3', target: '5', name: '' }, |
||||
|
{ source: '5', target: '6', name: '' }, |
||||
|
{ source: '5', target: '7', name: '' }, |
||||
|
{ source: '5', target: '8', name: '' }, |
||||
|
{ source: '9', target: '10', name: '' }, |
||||
|
{ source: '10', target: '9', name: '' }, |
||||
|
{ source: '1', target: '2', name: '' }, |
||||
|
{ source: '1', target: '10', name: '' } |
||||
|
|
||||
|
] |
||||
|
|
||||
|
export default { |
||||
|
name: 'Charts', |
||||
|
props: { |
||||
|
// chartList: { |
||||
|
// type: Object, |
||||
|
// required: true |
||||
|
// } |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
myChart: '', |
||||
|
seriesData: data, |
||||
|
seriesLinks: linkData, |
||||
|
categories: [], |
||||
|
lastClickId: '', |
||||
|
colors: ['#a3d2ca', '#056676', '#ea2c62', '#16a596', '#03c4a1', '#f5a25d', |
||||
|
'#8CD282', '#32e0c4', '#00FAE1', '#f05454'] |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
// chartList: { |
||||
|
// handler(val) { |
||||
|
// this.formatData(val || [], true) |
||||
|
// } |
||||
|
// } |
||||
|
}, |
||||
|
beforeDestroy() {}, |
||||
|
methods: { |
||||
|
/** |
||||
|
* 节点点击事件 |
||||
|
*/ |
||||
|
async nodeClick(params) { |
||||
|
const index = this.seriesData.findIndex( |
||||
|
(item) => item.id === params.data.id |
||||
|
) |
||||
|
console.log('点了节点:' + index + 1, 'clicked') |
||||
|
}, |
||||
|
/** |
||||
|
* 设置echarts配置项,重绘画布 |
||||
|
*/ |
||||
|
initCharts() { |
||||
|
// const that = this |
||||
|
if (!this.myChart) { |
||||
|
this.myChart = echarts.init(document.getElementById('chart')) |
||||
|
this.myChart.on('click', (params) => { |
||||
|
if (params.dataType === 'node') { |
||||
|
// 判断点击的是图表的节点部分 |
||||
|
this.nodeClick(params) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
// 指定图表的配置项和数据 |
||||
|
const option = { |
||||
|
// 动画更新变化时间 |
||||
|
animationDurationUpdate: 500, |
||||
|
animationEasingUpdate: 'quinticInOut', |
||||
|
tooltip: { |
||||
|
show: false |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
type: 'graph', |
||||
|
layout: 'force', |
||||
|
legendHoverLink: true, // 是否启用图例 hover(悬停) 时的联动高亮。 |
||||
|
hoverAnimation: true, // 是否开启鼠标悬停节点的显示动画 |
||||
|
focusNodeAdjacency: true, |
||||
|
edgeLabel: { |
||||
|
position: 'middle', // 边上的文字样式 |
||||
|
normal: { |
||||
|
show: true, |
||||
|
textStyle: { |
||||
|
fontSize: 12 |
||||
|
}, |
||||
|
position: 'middle', |
||||
|
formatter: function(x) { |
||||
|
return x.data.name |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
edgeSymbol: ['', 'arrow'], |
||||
|
force: { |
||||
|
edgeLength: 15, |
||||
|
repulsion: 200 |
||||
|
}, |
||||
|
roam: true, |
||||
|
draggable: true, // 每个节点的拖拉 |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: '#00FAE1', |
||||
|
cursor: 'pointer', |
||||
|
// color:Math.floor(Math.random()*16777215).toString(16), |
||||
|
// color: ['#fc853e','#28cad8','#9564bf','#bd407e','#28cad8','#fc853e','#e5a214'], |
||||
|
label: { |
||||
|
show: true, |
||||
|
position: [-10, -15], |
||||
|
textStyle: { |
||||
|
// 标签的字体样式 |
||||
|
color: '#fff', // 字体颜色 |
||||
|
fontStyle: 'normal', // 文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜 |
||||
|
fontWeight: 'bold', // 'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400... |
||||
|
fontFamily: 'sans-serif', // 文字的字体系列 |
||||
|
fontSize: 12 // 字体大小 |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
nodeStyle: { |
||||
|
brushType: 'both', |
||||
|
borderColor: 'rgba(255,215,0,0.4)', |
||||
|
borderWidth: 1 |
||||
|
} |
||||
|
}, |
||||
|
// 鼠标放上去有阴影效果 |
||||
|
emphasis: { |
||||
|
shadowColor: '#00FAE1', |
||||
|
shadowOffsetX: 0, |
||||
|
shadowOffsetY: 0, |
||||
|
shadowBlur: 40 |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
lineStyle: { |
||||
|
width: 2 |
||||
|
|
||||
|
}, |
||||
|
label: { |
||||
|
fontSize: 18 |
||||
|
}, |
||||
|
symbolSize: 24, // 节点大小 |
||||
|
links: this.seriesLinks, |
||||
|
data: this.seriesData, |
||||
|
categories: this.categories, |
||||
|
cursor: 'pointer' |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
// 使用刚指定的配置项和数据显示图表。 |
||||
|
this.myChart.setOption(option) |
||||
|
}, |
||||
|
/** |
||||
|
* 格式化数据到表格需要的数据 |
||||
|
*/ |
||||
|
formatData(list, reset = false) { |
||||
|
const that = this |
||||
|
const nodes = list.seriesData |
||||
|
this.seriesData = [] |
||||
|
this.seriesLinks = [] |
||||
|
let colorIndex = 0 |
||||
|
const data = [] |
||||
|
const loadedCat = [] |
||||
|
nodes.forEach((item, index) => { |
||||
|
if (item.categary && loadedCat.indexOf(item.categary) === -1) { |
||||
|
colorIndex = Math.floor((Math.random() * that.colors.length)) |
||||
|
loadedCat.push(item.categary) |
||||
|
this.categories.push({ name: item.categary }) |
||||
|
} |
||||
|
item.itemStyle = { |
||||
|
color: that.colors[colorIndex], |
||||
|
borderColor: '#ffffff' |
||||
|
} |
||||
|
data.push(item) |
||||
|
}) |
||||
|
this.seriesData.push(...data) |
||||
|
this.seriesLinks.push(...list.linksData) |
||||
|
this.initCharts() |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.chart { |
||||
|
height: 100%; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,217 @@ |
|||||
|
<template> |
||||
|
<div id="knowledge-graph" style="width: 100%; height: calc(100vh - 184px);" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import echarts from 'echarts' |
||||
|
|
||||
|
export default { |
||||
|
name: 'KnowledgeGraph', |
||||
|
mounted() { |
||||
|
this.initChart() |
||||
|
}, |
||||
|
methods: { |
||||
|
initChart() { |
||||
|
// 初始化 echarts 实例 |
||||
|
const chart = echarts.init(document.getElementById('knowledge-graph')) |
||||
|
|
||||
|
// 定义知识图谱数据，并为每个节点设置颜色 |
||||
|
// const data = [ |
||||
|
// { name: '文书档案', itemStyle: { color: '#cc6633' }}, |
||||
|
// { name: '档案分类', itemStyle: { color: '#66cc33' }}, |
||||
|
// { name: '行政管理', itemStyle: { color: '#66cc33' }}, |
||||
|
// { name: '党群工作', itemStyle: { color: '#66cc33' }}, |
||||
|
// { name: '经营管理', itemStyle: { color: '#66cc33' }}, |
||||
|
// { name: '生成管理', itemStyle: { color: '#66cc33' }}, |
||||
|
// { name: '保管期限', itemStyle: { color: '#cc3399' }}, |
||||
|
// { name: '永久', itemStyle: { color: '#cc3399' }}, |
||||
|
// { name: '定期30年', itemStyle: { color: '#cc3399' }}, |
||||
|
// { name: '定期10年', itemStyle: { color: '#cc3399' }}, |
||||
|
// { name: '年度', itemStyle: { color: '#6699cc' }}, |
||||
|
// { name: '2022', itemStyle: { color: '#6699cc' }}, |
||||
|
// { name: '2023', itemStyle: { color: '#6699cc' }}, |
||||
|
// { name: '2024', itemStyle: { color: '#6699cc' }}, |
||||
|
// { name: '密级', itemStyle: { color: '#cc9966' }}, |
||||
|
// { name: '公开', itemStyle: { color: '#cc9966' }}, |
||||
|
// { name: '限制', itemStyle: { color: '#cc9966' }}, |
||||
|
// { name: '秘密', itemStyle: { color: '#cc9966' }}, |
||||
|
// { name: '机密', itemStyle: { color: '#cc9966' }}, |
||||
|
// { name: '绝密', itemStyle: { color: '#cc9966' }} |
||||
|
// ] |
||||
|
|
||||
|
const data = [ |
||||
|
{ name: '文书档案' }, |
||||
|
{ name: '档案分类' }, |
||||
|
{ name: '行政管理' }, |
||||
|
{ name: '党群工作' }, |
||||
|
{ name: '经营管理' }, |
||||
|
{ name: '生成管理' }, |
||||
|
{ name: '保管期限' }, |
||||
|
{ name: '永久' }, |
||||
|
{ name: '定期30年' }, |
||||
|
{ name: '定期10年' }, |
||||
|
{ name: '年度' }, |
||||
|
{ name: '2022' }, |
||||
|
{ name: '2023' }, |
||||
|
{ name: '2024' }, |
||||
|
{ name: '密级' }, |
||||
|
{ name: '公开' }, |
||||
|
{ name: '限制' }, |
||||
|
{ name: '秘密' }, |
||||
|
{ name: '机密' }, |
||||
|
{ name: '绝密' } |
||||
|
] |
||||
|
|
||||
|
const links = [ |
||||
|
{ source: '文书档案', target: '档案分类' }, |
||||
|
{ source: '文书档案', target: '年度' }, |
||||
|
{ source: '文书档案', target: '保管期限' }, |
||||
|
{ source: '文书档案', target: '密级' }, |
||||
|
{ source: '保管期限', target: '永久' }, |
||||
|
{ source: '保管期限', target: '定期30年' }, |
||||
|
{ source: '保管期限', target: '定期10年' }, |
||||
|
{ source: '年度', target: '2022' }, |
||||
|
{ source: '年度', target: '2023' }, |
||||
|
{ source: '年度', target: '2024' }, |
||||
|
{ source: '密级', target: '公开' }, |
||||
|
{ source: '密级', target: '限制' }, |
||||
|
{ source: '密级', target: '秘密' }, |
||||
|
{ source: '密级', target: '机密' }, |
||||
|
{ source: '密级', target: '绝密' }, |
||||
|
{ source: '档案分类', target: '行政管理' }, |
||||
|
{ source: '档案分类', target: '党群工作' }, |
||||
|
{ source: '档案分类', target: '经营管理' }, |
||||
|
{ source: '档案分类', target: '生成管理' } |
||||
|
] |
||||
|
|
||||
|
// 配置项 |
||||
|
const option = { |
||||
|
tooltip: {}, |
||||
|
series: [ |
||||
|
{ |
||||
|
type: 'graph', |
||||
|
layout: 'force', |
||||
|
data: data, |
||||
|
links: links, |
||||
|
cursor: 'pointer', |
||||
|
color: { |
||||
|
type: 'linear', |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
x2: 1, |
||||
|
y2: 1, |
||||
|
colorStops: [{ |
||||
|
offset: 0, |
||||
|
color: 'rgba(255, 149, 0, 0.1)' // 0% 处的颜色 |
||||
|
}, { |
||||
|
offset: 1, |
||||
|
color: 'rgba(255, 149, 0, 1)' // 100% 处的颜色 |
||||
|
}], |
||||
|
global: false // 缺省为 false |
||||
|
}, |
||||
|
legendHoverLink: true, // 是否启用图例 hover(悬停) 时的联动高亮。 |
||||
|
hoverAnimation: true, // 是否开启鼠标悬停节点的显示动画 |
||||
|
focusNodeAdjacency: true, // 当鼠标移动到节点上，突出显示节点以及节点的边和邻接节点 |
||||
|
draggable: true, // 指示节点是否可以拖动 |
||||
|
symbolSize: 60, // 调整节点的大小 |
||||
|
roam: 'scale', // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启 |
||||
|
edgeSymbol: ['', 'arrow'], // 边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：edgeSymbol: ['circle', 'arrow'] |
||||
|
edgeSymbolSize: [2, 6], // 边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。 |
||||
|
edgeLabel: { |
||||
|
// position: 'middle', // 边上的文字样式 |
||||
|
// normal: { |
||||
|
// show: true, |
||||
|
// textStyle: { |
||||
|
// fontSize: 12 |
||||
|
// }, |
||||
|
// position: 'middle', |
||||
|
// formatter: function(x) { |
||||
|
// return x.data.name |
||||
|
// } |
||||
|
// } |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
// color: '#00FAE1', |
||||
|
cursor: 'pointer', |
||||
|
// color:Math.floor(Math.random()*16777215).toString(16), |
||||
|
label: { |
||||
|
show: true, |
||||
|
// position: [-10, -15], |
||||
|
textStyle: { |
||||
|
// 标签的字体样式 |
||||
|
color: '#000', // 字体颜色 |
||||
|
fontStyle: 'normal', // 文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜 |
||||
|
fontWeight: 'bold', |
||||
|
fontFamily: 'sans-serif', // 文字的字体系列 |
||||
|
fontSize: 14 // 字体大小 |
||||
|
} |
||||
|
}, |
||||
|
nodeStyle: { |
||||
|
brushType: 'both', |
||||
|
borderColor: 'rgba(255,215,0,0.4)', |
||||
|
borderWidth: 1 |
||||
|
} |
||||
|
} |
||||
|
// 鼠标放上去有阴影效果 |
||||
|
// emphasis: { |
||||
|
// shadowColor: '#00FAE1', |
||||
|
// shadowOffsetX: 0, |
||||
|
// shadowOffsetY: 0, |
||||
|
// shadowBlur: 40 |
||||
|
// } |
||||
|
}, |
||||
|
label: { |
||||
|
show: true, |
||||
|
position: 'top', |
||||
|
formatter: '{b}', |
||||
|
textStyle: { |
||||
|
fontSize: 20, |
||||
|
fontWeight: 600, |
||||
|
color: '#000' |
||||
|
} |
||||
|
}, |
||||
|
lineStyle: { |
||||
|
width: 2, |
||||
|
color: { |
||||
|
type: 'linear', |
||||
|
x: 0, |
||||
|
y: 0, |
||||
|
x2: 1, |
||||
|
y2: 1, |
||||
|
colorStops: [{ |
||||
|
offset: 0, color: 'rgba(0, 255, 244, 0.01)' // 0% 处的颜色 |
||||
|
}, { |
||||
|
offset: 1, color: 'rgba(0, 255, 244, 1)' // 100% 处的颜色 |
||||
|
}], |
||||
|
global: false |
||||
|
}, |
||||
|
curveness: 0.2// 弧度 |
||||
|
}, |
||||
|
force: { // 力引导图基本配置 |
||||
|
layoutAnimation: true, |
||||
|
xAxisIndex: 0, // x轴坐标 有多种坐标系轴坐标选项 |
||||
|
yAxisIndex: 0, // y轴坐标 |
||||
|
gravity: 0.1, // 节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。 |
||||
|
edgeLength: 100, // 边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长 |
||||
|
repulsion: 500 // 节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。 |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
|
||||
|
// 使用配置项显示图表 |
||||
|
chart.setOption(option) |
||||
|
|
||||
|
// 监听窗口大小变化，自适应调整图表 |
||||
|
window.addEventListener('resize', () => { |
||||
|
chart.resize() |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/* 可以在这里添加样式 */ |
||||
|
</style> |
||||
@ -0,0 +1,219 @@ |
|||||
|
<template> |
||||
|
<div id="knowledge-graph" style="width: 100%; height: calc(100vh - 184px);" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import echarts from 'echarts' |
||||
|
|
||||
|
export default { |
||||
|
name: 'KnowledgeGraph', |
||||
|
mounted() { |
||||
|
this.initChart() |
||||
|
}, |
||||
|
methods: { |
||||
|
// https://relation-graph.com/#/docs/start |
||||
|
initChart() { |
||||
|
// 初始化 echarts 实例 |
||||
|
const chart = echarts.init(document.getElementById('knowledge-graph')) |
||||
|
|
||||
|
// 定义知识图谱数据，并为每个节点设置颜色 |
||||
|
// const data = [ |
||||
|
// { name: '文书档案', itemStyle: { color: '#cc6633' }}, |
||||
|
// { name: '档案分类', itemStyle: { color: '#66cc33' }}, |
||||
|
// { name: '行政管理', itemStyle: { color: '#66cc33' }}, |
||||
|
// { name: '党群工作', itemStyle: { color: '#66cc33' }}, |
||||
|
// { name: '经营管理', itemStyle: { color: '#66cc33' }}, |
||||
|
// { name: '生成管理', itemStyle: { color: '#66cc33' }}, |
||||
|
// { name: '保管期限', itemStyle: { color: '#cc3399' }}, |
||||
|
// { name: '永久', itemStyle: { color: '#cc3399' }}, |
||||
|
// { name: '定期30年', itemStyle: { color: '#cc3399' }}, |
||||
|
// { name: '定期10年', itemStyle: { color: '#cc3399' }}, |
||||
|
// { name: '年度', itemStyle: { color: '#6699cc' }}, |
||||
|
// { name: '2022', itemStyle: { color: '#6699cc' }}, |
||||
|
// { name: '2023', itemStyle: { color: '#6699cc' }}, |
||||
|
// { name: '2024', itemStyle: { color: '#6699cc' }}, |
||||
|
// { name: '密级', itemStyle: { color: '#cc9966' }}, |
||||
|
// { name: '公开', itemStyle: { color: '#cc9966' }}, |
||||
|
// { name: '限制', itemStyle: { color: '#cc9966' }}, |
||||
|
// { name: '秘密', itemStyle: { color: '#cc9966' }}, |
||||
|
// { name: '机密', itemStyle: { color: '#cc9966' }}, |
||||
|
// { name: '绝密', itemStyle: { color: '#cc9966' }} |
||||
|
// ] |
||||
|
|
||||
|
const data = [ |
||||
|
{ name: '文书档案' }, |
||||
|
{ name: '档案分类' }, |
||||
|
{ name: '行政管理' }, |
||||
|
{ name: '党群工作' }, |
||||
|
{ name: '经营管理' }, |
||||
|
{ name: '生成管理' }, |
||||
|
{ name: '保管期限' }, |
||||
|
{ name: '永久' }, |
||||
|
{ name: '定期30年' }, |
||||
|
{ name: '定期10年' }, |
||||
|
{ name: '年度' }, |
||||
|
{ name: '2022' }, |
||||
|
{ name: '2023' }, |
||||
|
{ name: '2024' }, |
||||
|
{ name: '密级' }, |
||||
|
{ name: '公开' }, |
||||
|
{ name: '限制' }, |
||||
|
{ name: '秘密' }, |
||||
|
{ name: '机密' }, |
||||
|
{ name: '绝密' } |
||||
|
] |
||||
|
|
||||
|
const links = [ |
||||
|
{ source: '文书档案', target: '档案分类' }, |
||||
|
{ source: '文书档案', target: '年度' }, |
||||
|
{ source: '文书档案', target: '保管期限' }, |
||||
|
{ source: '文书档案', target: '密级' }, |
||||
|
{ source: '保管期限', target: '永久' }, |
||||
|
{ source: '保管期限', target: '定期30年' }, |
||||
|
{ source: '保管期限', target: '定期10年' }, |
||||
|
{ source: '年度', target: '2022' }, |
||||
|
{ source: '年度', target: '2023' }, |
||||
|
{ source: '年度', target: '2024' }, |
||||
|
{ source: '密级', target: '公开' }, |
||||
|
{ source: '密级', target: '限制' }, |
||||
|
{ source: '密级', target: '秘密' }, |
||||
|
{ source: '密级', target: '机密' }, |
||||
|
{ source: '密级', target: '绝密' }, |
||||
|
{ source: '档案分类', target: '行政管理' }, |
||||
|
{ source: '档案分类', target: '党群工作' }, |
||||
|
{ source: '档案分类', target: '经营管理' }, |
||||
|
{ source: '档案分类', target: '生成管理' } |
||||
|
] |
||||
|
|
||||
|
// 配置项 |
||||
|
const option = { |
||||
|
tooltip: {}, |
||||
|
series: [ |
||||
|
{ |
||||
|
type: 'graph', |
||||
|
layout: 'force', |
||||
|
data: data, |
||||
|
links: links, |
||||
|
cursor: 'pointer', |
||||
|
// color: { |
||||
|
// type: 'linear', |
||||
|
// x: 0, |
||||
|
// y: 0, |
||||
|
// x2: 1, |
||||
|
// y2: 1, |
||||
|
// colorStops: [{ |
||||
|
// offset: 0, |
||||
|
// color: 'rgba(255, 149, 0, 0.1)' // 0% 处的颜色 |
||||
|
// }, { |
||||
|
// offset: 1, |
||||
|
// color: 'rgba(255, 149, 0, 1)' // 100% 处的颜色 |
||||
|
// }], |
||||
|
// global: false // 缺省为 false |
||||
|
// }, |
||||
|
legendHoverLink: true, // 是否启用图例 hover(悬停) 时的联动高亮。 |
||||
|
hoverAnimation: true, // 是否开启鼠标悬停节点的显示动画 |
||||
|
focusNodeAdjacency: true, // 当鼠标移动到节点上，突出显示节点以及节点的边和邻接节点 |
||||
|
draggable: true, // 指示节点是否可以拖动 |
||||
|
symbolSize: 60, // 调整节点的大小 |
||||
|
roam: 'scale', // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启 |
||||
|
edgeSymbol: ['', 'arrow'], // 边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：edgeSymbol: ['circle', 'arrow'] |
||||
|
edgeSymbolSize: [2, 6], // 边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。 |
||||
|
edgeLabel: { |
||||
|
// position: 'middle', // 边上的文字样式 |
||||
|
// normal: { |
||||
|
// show: true, |
||||
|
// textStyle: { |
||||
|
// fontSize: 12 |
||||
|
// }, |
||||
|
// position: 'middle', |
||||
|
// formatter: function(x) { |
||||
|
// return x.data.name |
||||
|
// } |
||||
|
// } |
||||
|
}, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
// color: '#00FAE1', |
||||
|
cursor: 'pointer', |
||||
|
// color:Math.floor(Math.random()*16777215).toString(16), |
||||
|
label: { |
||||
|
show: true, |
||||
|
// position: [-10, -15], |
||||
|
textStyle: { |
||||
|
// 标签的字体样式 |
||||
|
color: '#000', // 字体颜色 |
||||
|
fontStyle: 'normal', // 文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜 |
||||
|
fontWeight: 'bold', |
||||
|
fontFamily: 'sans-serif', // 文字的字体系列 |
||||
|
fontSize: 14 // 字体大小 |
||||
|
} |
||||
|
}, |
||||
|
nodeStyle: { |
||||
|
brushType: 'both', |
||||
|
borderColor: 'rgba(255,215,0,0.4)', |
||||
|
borderWidth: 1 |
||||
|
} |
||||
|
} |
||||
|
// 鼠标放上去有阴影效果 |
||||
|
// emphasis: { |
||||
|
// shadowColor: '#00FAE1', |
||||
|
// shadowOffsetX: 0, |
||||
|
// shadowOffsetY: 0, |
||||
|
// shadowBlur: 40 |
||||
|
// } |
||||
|
}, |
||||
|
label: { |
||||
|
show: true, |
||||
|
position: 'top', |
||||
|
formatter: '{b}', |
||||
|
textStyle: { |
||||
|
fontSize: 20, |
||||
|
fontWeight: 600, |
||||
|
color: '#000' |
||||
|
} |
||||
|
}, |
||||
|
lineStyle: { |
||||
|
width: 2, |
||||
|
color: '#999' |
||||
|
// color: { |
||||
|
// type: 'linear', |
||||
|
// x: 0, |
||||
|
// y: 0, |
||||
|
// x2: 1, |
||||
|
// y2: 1, |
||||
|
// colorStops: [{ |
||||
|
// offset: 0, color: 'rgba(0, 255, 244, 0.01)' // 0% 处的颜色 |
||||
|
// }, { |
||||
|
// offset: 1, color: 'rgba(0, 255, 244, 1)' // 100% 处的颜色 |
||||
|
// }], |
||||
|
// global: false |
||||
|
// } |
||||
|
// curveness: 0.2// 弧度 |
||||
|
}, |
||||
|
force: { // 力引导图基本配置 |
||||
|
layoutAnimation: true, |
||||
|
xAxisIndex: 0, // x轴坐标 有多种坐标系轴坐标选项 |
||||
|
yAxisIndex: 0, // y轴坐标 |
||||
|
gravity: 0.1, // 节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。 |
||||
|
edgeLength: 100, // 边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长 |
||||
|
repulsion: 500 // 节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。 |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
|
||||
|
// 使用配置项显示图表 |
||||
|
chart.setOption(option) |
||||
|
|
||||
|
// 监听窗口大小变化，自适应调整图表 |
||||
|
window.addEventListener('resize', () => { |
||||
|
chart.resize() |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/* 可以在这里添加样式 */ |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue