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