25 changed files with 3203 additions and 76 deletions
-
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