19 changed files with 566 additions and 3308 deletions
-
2src/api/home/cpu/index.js
-
51src/api/system/documentArchives.js
-
22src/views/archivesMIOD/miodLibrary/module/detail.vue
-
7src/views/archivesMIOD/miodSearch/index.vue
-
11src/views/archivesMIOD/miodSearch/module/resultList.vue
-
183src/views/archivesMIOD/miodStatistics/miodTable.vue
-
38src/views/components/BindingTagDlg.vue
-
230src/views/components/echarts/catePie copy.vue
-
46src/views/components/echarts/catePie.vue
-
1744src/views/components/echarts/data.json
-
160src/views/components/echarts/graph1.vue
-
85src/views/components/echarts/graph2.vue
-
425src/views/components/echarts/graph222.vue
-
253src/views/components/echarts/graph4.vue
-
217src/views/components/echarts/graph5.vue
-
219src/views/components/echarts/graph6.vue
-
2src/views/components/echarts/typePie.vue
-
17src/views/dashboard/PanelGroup.vue
-
162src/views/home.vue
@ -0,0 +1,230 @@ |
|||
<template> |
|||
<!-- 档案类型 --> |
|||
<div id="main3" :style="{height:height,width:width}" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import echarts from 'echarts' |
|||
import resize from '@/views/dashboard/mixins/resize' |
|||
|
|||
export default { |
|||
name: 'AcrossEcharts', |
|||
mixins: [resize], |
|||
props: { |
|||
addArcivesData: { |
|||
type: Object, |
|||
require: true, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '100%' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '100%' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
chart: null |
|||
} |
|||
}, |
|||
watch: { |
|||
'addArcivesData': { |
|||
handler(val) { |
|||
setTimeout(() => { |
|||
this.drawChart() |
|||
}, 100) |
|||
}, |
|||
immediate: true, |
|||
deep: true |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.drawChart() |
|||
window.addEventListener('resize', this.__resizeHandler) |
|||
}, |
|||
methods: { |
|||
drawChart() { |
|||
const chartDom = document.getElementById('main3') |
|||
this.chart = echarts.init(chartDom) |
|||
let option = null |
|||
option = { |
|||
grid: { // 边距 |
|||
left: '2%', |
|||
right: '5%', |
|||
bottom: '3%', |
|||
top: '15%', |
|||
containLabel: true |
|||
}, |
|||
legend: { |
|||
data: ['案卷', '文件'], |
|||
right: 20, |
|||
top: 0, |
|||
icon: 'circle', |
|||
textStyle: { |
|||
color: '#1D2129' |
|||
} |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross', |
|||
label: { |
|||
backgroundColor: '#339cff' |
|||
} |
|||
}, |
|||
formatter: function(params) { |
|||
var res = "<div style='width:100%;height:24px;margin-bottom:5px;padding:0 12px;line-height:24px;'><p>" + echarts.format.formatTime('yyyy年M月', new Date(params[0].name)) + ' </p></div>' |
|||
for (var i = 0; i < params.length; i++) { |
|||
res += `<div style="color: #fff;font-size: 14px; padding:0 12px;line-height: 24px"> |
|||
<span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;background-color:${[params[i].color]};"></span> |
|||
${params[i].seriesName} |
|||
${params[i].data} |
|||
</div>` |
|||
} |
|||
return res |
|||
} |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: this.addArcivesData.addArcivesMonth, |
|||
axisLine: {// 轴线的颜色以及宽度 |
|||
lineStyle: { |
|||
color: '#E5E6EB' |
|||
} |
|||
}, |
|||
axisLabel: {// x轴文字的配置 |
|||
show: true, |
|||
textStyle: { |
|||
color: '#A6ADB6' |
|||
}, |
|||
formatter: function(value) { |
|||
return echarts.format.formatTime('M月', new Date(value)) |
|||
} |
|||
} |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
min: 0, |
|||
max: this.addArcivesData.addArcivesMaxCount, |
|||
// splitNumber: 5, |
|||
axisLine: {// 轴线的颜色以及宽度 |
|||
lineStyle: { |
|||
color: '#E5E6EB' |
|||
} |
|||
}, |
|||
axisLabel: {// x轴文字的配置 |
|||
show: true, |
|||
textStyle: { |
|||
color: '#A6ADB6' |
|||
} |
|||
}, |
|||
axisTick: { // 刻度线隐藏 |
|||
show: false |
|||
}, |
|||
splitLine: {// 分割线配置 |
|||
lineStyle: { |
|||
color: '#E5E6EB', |
|||
type: 'dashed' |
|||
} |
|||
} |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '案卷', |
|||
data: this.addArcivesData.addArcivesNum, |
|||
type: 'line', |
|||
areaStyle: { |
|||
normal: { |
|||
color: { |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0.1, |
|||
color: 'rgba(22, 93, 255, 0.64)' // 0% 处的颜色 |
|||
}, |
|||
{ |
|||
offset: 0.5, |
|||
color: 'rgba(22, 93, 255, 0.3)' // 0% 处的颜色 |
|||
}, |
|||
{ |
|||
offset: 0.7, |
|||
color: 'rgba(22, 93, 255, 0.1)' // 0% 处的颜色 |
|||
}, |
|||
{ |
|||
offset: 0.9, |
|||
color: 'rgba(0,0,0, 0.1)' // 100% 处的颜色 |
|||
} |
|||
] |
|||
// globalCoord: false // 缺省为 false |
|||
} |
|||
} |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
color: '#165DFF', // 改变折线点的颜色 |
|||
lineStyle: { |
|||
color: '#165DFF' // 改变折线颜色 |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
name: '文件', |
|||
data: this.addArcivesData.addArcivesNumFile, |
|||
type: 'line', |
|||
areaStyle: { |
|||
normal: { |
|||
color: { |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0.1, |
|||
color: 'rgba(20, 201, 201, 0.64)' // 0% 处的颜色 |
|||
}, |
|||
{ |
|||
offset: 0.5, |
|||
color: 'rgba(20, 201, 201, 0.3)' // 0% 处的颜色 |
|||
}, |
|||
{ |
|||
offset: 0.7, |
|||
color: 'rgba(20, 201, 201, 0.1)' // 0% 处的颜色 |
|||
}, |
|||
{ |
|||
offset: 0.9, |
|||
color: 'rgba(0,0,0, 0.1)' // 100% 处的颜色 |
|||
} |
|||
] |
|||
// globalCoord: false // 缺省为 false |
|||
} |
|||
} |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
color: '#14C9C9', // 改变折线点的颜色 |
|||
lineStyle: { |
|||
color: '#14C9C9' // 改变折线颜色 |
|||
} |
|||
} |
|||
} |
|||
} |
|||
] |
|||
} |
|||
option && this.chart.setOption(option) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
</style> |
|||
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
@ -1,160 +0,0 @@ |
|||
<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> |
|||
@ -1,85 +0,0 @@ |
|||
<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> |
|||
@ -1,425 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<!-- <div id="graph-container"> |
|||
<div v-if="isLoading">Loading data from Neo4j...</div> |
|||
<div v-if="errorMessage">{{ errorMessage }}</div> |
|||
</div> --> |
|||
<div ref="myPage" class="my-graph" style="height: calc(100vh - 184px);"> |
|||
<!-- :on-node-click="onNodeClick" |
|||
:on-line-click="onLineClick" |
|||
:on-canvas-click="onCanvasClick" |
|||
:on-node-expand="onNodeExpand" --> |
|||
<RelationGraph |
|||
ref="graphRef" |
|||
:options="graphOptions" |
|||
:on-node-click="onNodeClick" |
|||
:on-canvas-click="onCanvasClick" |
|||
> |
|||
<template #node="{node}"> |
|||
<div @mouseover="showNodeTips(node, $event)" @mouseout="hideNodeTips(node, $event)"> |
|||
<!-- :class="node.id === '1' ? 'c-my-rg-node c-big-style': 'c-my-rg-node '" --> |
|||
<div class="c-my-rg-node" :style="{'height': node.width + 'px', 'line-height': node.width + 'px'}"> |
|||
{{ node.text }} |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<template #graph-plug> |
|||
<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 { getGraphData } from '../../../neo4j.js' |
|||
import RelationGraph from 'relation-graph' |
|||
// https://relation-graph.com/#/docs/start |
|||
const graph_json_data = { |
|||
// '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, |
|||
isShowCodePanel: false, |
|||
isShowNodeTipsPanel: false, |
|||
nodeMenuPanelPosition: { x: 0, y: 0 }, |
|||
currentNode: {}, |
|||
graphOptions: { |
|||
useAnimationWhenExpanded: true, |
|||
useAnimationWhenRefresh: true, |
|||
placeOtherGroup: true, |
|||
|
|||
disableNodeclickEffect: true, |
|||
|
|||
reLayoutWhenExpandedOrCollapsed: true, |
|||
defaultExpandHolderPosition: 'bottom', |
|||
zoomToFitWhenRefresh: true, |
|||
|
|||
layout: { |
|||
layoutName: 'force', |
|||
// 'maxLayoutTimes': 10000, |
|||
// 'force_node_repulsion': 1.5, |
|||
'force_line_elastic': 0.5 |
|||
}, |
|||
allowSwitchLineShape: true, |
|||
allowSwitchJunctionPoint: true, |
|||
defaultLineColor: 'rgba(0,0,0,0.5)', |
|||
|
|||
defaultNodeBorderWidth: 0, |
|||
defaultNodeBorderColor: 'transpanret', |
|||
defaultNodeFontColor: '#000', // 节点颜色 |
|||
// defaultNodeColor: 'transparent', |
|||
// defaultNodeShape: 0, |
|||
defaultFocusRootNode: false // 默认是否选中根节点 |
|||
// lineUseTextPath: true |
|||
|
|||
}, |
|||
isLoading: false, |
|||
errorMessage: '', |
|||
nodes: [], |
|||
edges: [] |
|||
} |
|||
}, |
|||
mounted() { |
|||
// this.showGraph() |
|||
this.resizeTimer = setInterval(async() => { |
|||
// const graphInstance = this.$refs.graphRef.getInstance(); |
|||
// await graphInstance.zoomToFit(); |
|||
}, 3000) |
|||
const query = "MATCH path = (target:Archives {id: '0047B3542CE88B895E41DE'})-[rels:HAS_KEYWORD*1..4]-(related:Archives) WHERE target <> related UNWIND relationships(path) AS r WITH startNode(r) AS n, r, endNode(r) AS m, length(path)/2 AS depth RETURN DISTINCT n, r, m;" |
|||
this.fetchData(query) |
|||
}, |
|||
beforeDestroy() { |
|||
clearInterval(this.resizeTimer) |
|||
}, |
|||
methods: { |
|||
async fetchData(query) { |
|||
this.isLoading = true |
|||
this.errorMessage = '' |
|||
try { |
|||
// 调用 getGraphData 函数获取数据 |
|||
|
|||
const { nodes, edges } = await getGraphData(query) |
|||
this.nodes = nodes |
|||
this.edges = edges |
|||
// 数据获取成功后调用渲染函数 |
|||
// this.renderGraph() |
|||
|
|||
// const colors = ['#FD8042', '#0348f3', '#F65163', '#563BE1', '#2B67DD', '#1AAE93', '#0FBED9', '#ffa4a4'] |
|||
|
|||
const colors = ['rgb(225,151,102)', 'rgb(194,159,87)', 'rgb(253,183,112)', 'rgb(127,181,123)', 'rgb(224,178,159)', 'rgb(196,149,72)', 'rgb(255,162,24)', 'rgb(189,237,229)'] |
|||
|
|||
const typeColorMap = {} |
|||
|
|||
this.allData.nodes = nodes.map(item => { |
|||
const newItem = { ...item, id: String(item.id) } |
|||
// if (item.type === 'CategoryClass') { |
|||
// // newItem.color = '#ec6941' |
|||
// // newItem.borderColor = '#ff875e' |
|||
// } else if (item.type === 'Category') { |
|||
// newItem.color = '#ec6941' |
|||
// newItem.borderColor = '#ff875e' |
|||
// } |
|||
|
|||
if (item.type) { |
|||
if (!typeColorMap[item.type]) { |
|||
typeColorMap[item.type] = colors[Object.keys(typeColorMap).length % colors.length] |
|||
} |
|||
newItem.color = typeColorMap[item.type] |
|||
newItem.borderColor = typeColorMap[item.type] |
|||
} |
|||
return newItem |
|||
}) |
|||
|
|||
this.allData.nodes.sort((a, b) => { |
|||
return parseInt(a.id) - parseInt(b.id) |
|||
}) |
|||
|
|||
this.allData.lines = edges.map(item => { |
|||
return { |
|||
...item, |
|||
from: String(item.from), |
|||
to: String(item.to) |
|||
} |
|||
}) |
|||
|
|||
console.log('this.allData', this.allData) |
|||
this.showGraph() |
|||
} catch (error) { |
|||
// 捕获并处理错误 |
|||
this.errorMessage = `Error fetching data from Neo4j: ${error.message}` |
|||
} finally { |
|||
this.isLoading = false |
|||
} |
|||
}, |
|||
renderGraph() { |
|||
try { |
|||
const container = document.getElementById('graph-container') |
|||
console.log('container', container) |
|||
if (!container) { |
|||
throw new Error('Graph container not found') |
|||
} |
|||
const graph = new RelationGraph(container, { |
|||
nodes: this.nodes, |
|||
edges: this.edges |
|||
}) |
|||
console.lo('graph', graph) |
|||
// 调用渲染方法 |
|||
graph.render() |
|||
} catch (error) { |
|||
this.errorMessage = `Error rendering graph: ${error.message}` |
|||
} |
|||
}, |
|||
async showGraph() { |
|||
const rootId = this.allData.nodes[0].id |
|||
this.allData.rootId = rootId |
|||
// this.allData.nodes.forEach(n => { |
|||
// if (n.id !== rootId) { |
|||
// this.allData.lines.push({ from: rootId, to: n.id, opacity: 0 }) |
|||
// } |
|||
// }) |
|||
|
|||
const graphInstance = this.$refs.graphRef.getInstance() |
|||
await this.stopForceIfNeed() |
|||
await graphInstance.setJsonData(this.allData) |
|||
|
|||
setTimeout(async() => { |
|||
await graphInstance.setZoom(100) |
|||
await graphInstance.moveToCenter() |
|||
await graphInstance.zoomToFit() |
|||
}, 1800) |
|||
}, |
|||
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) |
|||
}, |
|||
// onNodeExpand(node, e) { |
|||
// // // 判断是否已经动态加载数据了 |
|||
// if (node.data.childrenLoaded) { |
|||
// console.log('这个节点的子节点已经加载过了') |
|||
// return |
|||
// } |
|||
// // 根据具体的业务需要决定是否需要从后台加载数据 |
|||
// if (!node.data.isNeedLoadDataFromRemoteServer) { |
|||
// console.log('是否需要从后台加载数据') |
|||
// alert('未查到更多相关信息！') |
|||
// return |
|||
// } |
|||
// }, |
|||
onNodeClick(nodeObject, $event) { |
|||
console.log('节点数据:', nodeObject) |
|||
const nodeId = nodeObject.id |
|||
const query = `MATCH (n) WHERE id(n) = ${nodeId} MATCH (n)-[r]-(m) RETURN n, r,m;` |
|||
this.fetchData(query) |
|||
console.log('query', query) |
|||
|
|||
const _all_nodes = this.$refs.graphRef.getInstance().getNodes() |
|||
// const _all_lines = this.$refs.graphRef.getLines() |
|||
const { lot } = nodeObject |
|||
// 子集高亮 |
|||
if (lot.childs && lot.childs.length) { |
|||
_all_nodes.forEach((thisNode) => { |
|||
let _isHideThisNode = false |
|||
lot.childs.forEach((childNode) => { |
|||
if (thisNode.id === childNode.id || thisNode.id === nodeObject.id) { |
|||
_isHideThisNode = true |
|||
} |
|||
if (lot.parent && thisNode.id === lot.parent.id) { |
|||
_isHideThisNode = true |
|||
} |
|||
}) |
|||
thisNode.opacity = _isHideThisNode ? 1 : 0.1 |
|||
}) |
|||
} else { |
|||
// 父级及本身高亮 |
|||
_all_nodes.forEach((thisNode) => { |
|||
let _isHideThisNode = false |
|||
if (thisNode.id === nodeObject.id) { |
|||
_isHideThisNode = true |
|||
} |
|||
if (lot.parent && thisNode.id === lot.parent.id) { |
|||
_isHideThisNode = true |
|||
} |
|||
thisNode.opacity = _isHideThisNode ? 1 : 0.1 |
|||
}) |
|||
} |
|||
// console.log('onNodeClick:', nodeObject) |
|||
// const allChildIds = this.deepGeAlltChildIds(nodeObject) |
|||
// console.log('allChildIds', allChildIds) |
|||
// 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) |
|||
// // node.lot.childs |
|||
// // node.targetNodes |
|||
// console.log('node.lot.childs', node.lot.childs) |
|||
// 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()) { |
|||
// 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 |
|||
// }) |
|||
// } |
|||
|
|||
const _all_nodes = this.$refs.graphRef.getInstance().getNodes() |
|||
_all_nodes.forEach((thisNode) => { |
|||
const _isHideThisNode = true |
|||
thisNode.opacity = _isHideThisNode ? 1 : 0.1 |
|||
}) |
|||
}, |
|||
// 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 { |
|||
font-size: 13px; |
|||
border-radius: 50%; |
|||
cursor: pointer; |
|||
height: 80px; |
|||
display: flex; |
|||
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; |
|||
} |
|||
::v-deep .c-rg-line-text{ |
|||
font-size: 10px !important; |
|||
// fill: red !important; |
|||
} |
|||
|
|||
</style> |
|||
@ -1,253 +0,0 @@ |
|||
<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> |
|||
@ -1,217 +0,0 @@ |
|||
<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> |
|||
@ -1,219 +0,0 @@ |
|||
<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