Skip to content

R
risk-monitor
提交 2758bd9b authored 作者: coderBryanFu's avatar coderBryanFu
浏览文件
操作

feat:新增组件：GraphChart

上级 97bf602f
隐藏空白字符变更
内嵌 并排
正在显示 包含 647 行增加 和 23 行删除
src/components/base/GraphChart/graphChart.js 0 → 100644
浏览文件 @ 2758bd9b
const getGraphChart = (nodes, links, layoutType) => {
const option = {
// title: {
// text: '企业关系网络',
// subtext: '节点图标表示企业，箭头表示关联方向',
// top: 'top',
// left: 'center',
// textStyle: {
// fontSize: 20,
// color: '#2c3e50'
// }
// },
// tooltip: {
// formatter: function (params) {
// if (params.dataType === 'node') {
// return `<div style="font-weight:bold;margin-bottom:5px">${params.data.name}</div>
// <div>类别: ${categories[params.data.category].name}</div>
// <div>关联度: ${params.data.value}</div>`;
// } else {
// return `<div>${nodes[params.data.source].name} → ${nodes[params.data.target].name}</div>
// <div>关联强度: ${params.data.value}</div>`;
// }
// }
// },
legend: {
// data: categories.map(c => c.name),
show: false,
top: 40,
textStyle: {
fontSize: 12
}
},
animation: true,
animationDuration: 1000,
animationEasing: 'cubicOut',
series: [{
type: 'graph',
itemStyle: {
color: '#73C0DE'
},
layout: layoutType,
data: nodes,
links: links,
// categories: categories,
roam: true,
label: {
show: true,
position: 'bottom',
formatter: '{b}',
fontSize: 12,
fontWeight: 'bold',
// backgroundColor: 'rgba(255,255,255,0.8)',
padding: [4, 6],
borderRadius: 4
},
lineStyle: {
color: 'source',
curveness: 0,
width: 2,
type: 'dashed',
color: '#AED6FF'
},
edgeSymbol: ['none', 'arrow'],
edgeSymbolSize: [0, 10],
emphasis: {
focus: 'adjacency',
lineStyle: {
width: 4
},
label: {
show: true,
fontSize: 14
}
},
force: {
repulsion: 300,
gravity: 0,
edgeLength: 300
},
edgeLabel: {
show: true,
position: 'middle',
fontSize: 14,
color: '#333',
backgroundColor: 'rgba(255,255,255,0.9)',
borderColor: '#bbb',
borderWidth: 1,
borderRadius: 4,
padding: [4, 8],
formatter: params => params.data.label ? params.data.label.formatter : ''
}
// edgeLabel: {
// show: true,
// position: 'middle',
// // fontSize: 14,
// // backgroundColor: 'rgba(255,255,255,0.9)',
// // borderColor: '#bbb',
// borderWidth: 1,
// borderRadius: 4,
// padding: [4, 8],
// // 核心：使用 formatter 函数
// formatter: function (params) {
// console.log('完整 params:', params);
// console.log('label 数据:', params.data.label);
// // 获取标签的文本内容，它存储在 params.data.label.formatter 里
// const labelText = params.data.label?.formatter || '';
// // 定义一个颜色映射
// const colorMap = {
// '合作': '#52c41a', // 绿色
// '持股': '#faad14', // 橙色
// '从属': '#f5222d' // 红色
// };
// // 根据文本内容获取对应的颜色，如果没有定义则使用默认的灰色
// const color = colorMap[labelText] || '#666';
// // 返回一个带内联样式的 HTML 字符串
// return `<span style="color: ${color};">${labelText}</span>`;
// }
// }
}],
// color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de']
};
return option
}
export default getGraphChart
\ No newline at end of file
src/components/base/GraphChart/index.vue 0 → 100644
浏览文件 @ 2758bd9b
<template>
<div class="graph-chart-wrapper" id="graph">
</div>
</template>
<script setup>
import { onMounted, nextTick } from 'vue';
import setChart from '@/utils/setChart';
import getGraphChart from './graphChart';
const props = defineProps({
nodes: {
type: Array,
default: []
},
links: {
type: Array,
default: []
},
layoutType: {
type: String,
default: 'force'
},
width: {
type: String,
default: 'force'
},
height: {
type: String,
default: 'force'
}
})
onMounted(() => {
const graph = getGraphChart(props.nodes, props.links, props.layoutType)
setChart(graph, 'graph')
})
</script>
<style lang="scss" scoped>
.graph-chart-wrapper {
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
src/components/base/WarningPane/index.vue
浏览文件 @ 2758bd9b
......@@ -64,6 +64,7 @@ const handleClickPane = () => {
border-radius: 10px;
border: 1px solid var(--color-primary-100);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
cursor: pointer;
}
.level1 {
......
src/styles/components/GraphChart/index.vue 0 → 100644
浏览文件 @ 2758bd9b
<template>
<el-row class="wrapper layout-grid-line">
<el-col :span="span">
<pre>
{{
`import GraphChart from '@/components/base/GraphChart/index.vue';
<template>
<GraphChart :nodes="nodes" :links="links" layoutType="none">
</GraphChart>
</template>
`}}
</pre>
<div class="chart-box">
<GraphChart :nodes="nodes" :links="links" layoutType="none">
</GraphChart>
</div>
</el-col>
</el-row>
</template>
<script setup>
import { ref } from 'vue'
import GraphChart from '@/components/base/GraphChart/index.vue'
import CompanyImg from "./symbol.png"
const span = 24
const nodes = ref([
{
id: 0,
name: "泰丰先行",
// category: 0,
symbolSize: 30,
value: 8,
symbol: `image://${CompanyImg}`,
x: 50,
y: 10
},
{
id: 1,
name: "国轩高科",
// category: 0,
symbolSize: 30,
value: 9,
symbol: `image://${CompanyImg}`,
x: 150,
y: 10
},
{
id: 2,
name: "智方纳米",
// category: 2,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
x: 250,
y: 10
},
{
id: 3,
name: "香百科技",
// category: 1,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
x: 350,
y: 10
},
{
id: 4,
name: "格林滨",
// category: 2,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
x: 450,
y: 10
},
{
id: 5,
name: "江西紫宸",
// category: 2,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
x: 550,
y: 10
},
{
id: 6,
name: "紫江企业",
// category: 4,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
x: 650,
y: 10
},
{
id: 7,
name: "大而美法案",
// category: 4,
symbolSize: 50,
value: 5,
symbol: `image://${CompanyImg}`,
x: 300,
y: 200
},
{
id: 8,
name: "比亚迪",
// category: 0,
symbolSize: 30,
value: 10,
symbol: `image://${CompanyImg}`,
x: 50,
y: 400
},
{
id: 9,
name: "铜陵有色",
// category: 3,
symbolSize: 30,
value: 8,
symbol: `image://${CompanyImg}`,
x: 150,
y: 400
},
{
id: 10,
name: "长盛精密",
// category: 1,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
x: 250,
y: 400
},
{
id: 11,
name: "天合光能",
// category: 0,
symbolSize: 30,
value: 8,
symbol: `image://${CompanyImg}`,
x: 350,
y: 400
},
{
id: 12,
name: "昆仑化学",
// category: 2,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
x: 250,
y: 400
},
{
id: 13,
name: "嘉源科技",
// category: 1,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
x: 450,
y: 400
},
{
id: 14,
name: "华阳集团",
// category: 4,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
x: 550,
y: 400
},
{
id: 15,
name: "海辰智能",
// category: 1,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
x: 650,
y: 400
},
]);
const links = ref([
{ source: 1, target: 7, label: { show: true, formatter: '合作' } },
{ source: 2, target: 7, label: { show: true, formatter: '持股' } },
{ source: 3, target: 7, label: { show: true, formatter: '合作' } },
{ source: 4, target: 7, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '从属' } },
{ source: 5, target: 7, label: { show: true, formatter: '合作' } },
{ source: 6, target: 7, label: { show: true, formatter: '持股' } },
{ source: 0, target: 7, label: { show: true, formatter: '持股' } },
{ source: 8, target: 7, label: { show: true, formatter: '合作' } },
{ source: 9, target: 7, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '从属' } },
{ source: 10, target: 7, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '合作' } },
{ source: 11, target: 7, label: { show: true, formatter: '合作' } },
{ source: 12, target: 7, label: { show: true, formatter: '合作' } },
{ source: 13, target: 7, label: { show: true, formatter: '合作' } },
{ source: 14, target: 7, label: { show: true, formatter: '合作' } },
{ source: 15, target: 7, label: { show: true, formatter: '合作', color: 'red', borderColor: 'red' } },
]);
</script>
<style lang="scss" scoped>
.wrapper {
width: 100%;
}
.chart-box {
width: 800px;
height: 500px;
}
</style>
\ No newline at end of file
src/styles/components/GraphTreeChart/index.vue 0 → 100644
浏览文件 @ 2758bd9b
<template>
<el-row class="wrapper layout-grid-line">
<el-col :span="span">
<pre>
{{
`import GraphChart from '@/components/base/GraphChart/index.vue';
<template>
<GraphChart :nodes="nodes" :links="links" layoutType="force" >
</GraphChart>
</template>
`}}
</pre>
<div class="chart-box">
<GraphChart :nodes="nodes" :links="links">
</GraphChart>
</div>
</el-col>
</el-row>
</template>
<script setup>
import { ref } from 'vue'
import GraphChart from '@/components/base/GraphChart/index.vue'
import CompanyImg from "./symbol.png"
const span = 24
const nodes = ref([
{
id: 1,
name: "泰丰先行",
// category: 0,
symbolSize: 30,
value: 8,
symbol: `image://${CompanyImg}`,
},
{
id: 2,
name: "国轩高科",
// category: 0,
symbolSize: 30,
value: 9,
symbol: `image://${CompanyImg}`,
},
{
id: 3,
name: "智方纳米",
// category: 2,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
},
{
id: 4,
name: "香百科技",
// category: 1,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 5,
name: "格林滨",
// category: 2,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 6,
name: "江西紫宸",
// category: 2,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
},
{
id: 7,
name: "紫江企业",
// category: 4,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 8,
name: "大而美法案",
// category: 4,
symbolSize: 50,
value: 5,
symbol: `image://${CompanyImg}`,
},
{
id: 9,
name: "比亚迪",
// category: 0,
symbolSize: 30,
value: 10,
symbol: `image://${CompanyImg}`,
},
{
id: 10,
name: "铜陵有色",
// category: 3,
symbolSize: 30,
value: 8,
symbol: `image://${CompanyImg}`,
},
{
id: 11,
name: "长盛精密",
// category: 1,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
},
{
id: 12,
name: "天合光能",
// category: 0,
symbolSize: 30,
value: 8,
symbol: `image://${CompanyImg}`,
},
{
id: 13,
name: "昆仑化学",
// category: 2,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 14,
name: "嘉源科技",
// category: 1,
symbolSize: 30,
value: 6,
symbol: `image://${CompanyImg}`,
},
{
id: 15,
name: "华阳集团",
// category: 4,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
},
{
id: 16,
name: "海辰智能",
// category: 1,
symbolSize: 30,
value: 7,
symbol: `image://${CompanyImg}`,
},
]);
const links = ref([
{ source: 1, target: 7, label: { show: true, formatter: '合作' } },
{ source: 2, target: 7, label: { show: true, formatter: '持股' } },
{ source: 3, target: 7, label: { show: true, formatter: '合作' } },
{ source: 4, target: 7, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '从属' } },
{ source: 5, target: 7, label: { show: true, formatter: '合作' } },
{ source: 6, target: 7, label: { show: true, formatter: '持股' } },
{ source: 8, target: 7, label: { show: true, formatter: '持股' } },
{ source: 9, target: 7, label: { show: true, formatter: '合作' } },
{ source: 10, target: 7, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '从属' } },
{ source: 11, target: 7, lineStyle: { type: 'dashed', color: '#d32f2f' }, label: { show: true, formatter: '合作' } },
{ source: 12, target: 7, label: { show: true, formatter: '合作' } },
{ source: 13, target: 7, label: { show: true, formatter: '合作' } },
{ source: 14, target: 7, label: { show: true, formatter: '合作' } },
{ source: 15, target: 7, label: { show: true, formatter: '合作' } },
{ source: 16, target: 7, label: { show: true, formatter: '合作', color: 'red', borderColor: 'red' } },
]);
</script>
<style lang="scss" scoped>
.wrapper {
width: 100%;
}
.chart-box {
width: 1600px;
height: 800px;
}
</style>
\ No newline at end of file
src/styles/components/WarnningPane/index.vue
浏览文件 @ 2758bd9b
......@@ -12,12 +12,12 @@ const span = 12
{{
`import WarnningPane from '@/components/base/WarningPane/index.vue';
<template>
<WarnningPane warnningLevel="特别重大风险" warnningContent="我是特别重大风险内容文字">
<WarnningPane warnningLevel="特别重大风险" warnningContent="我是特别重大风险内容文字我是特别重大风险内容文字">
</WarnningPane>
</template>
`}}
</pre>
<WarnningPane warnningLevel="特别重大风险" warnningContent="我是特别重大风险内容文字">
<WarnningPane warnningLevel="特别重大风险" warnningContent="我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字我是特别重大风险内容文字">
</WarnningPane>
</el-col>
</el-row>
......
src/styles/components/index.vue
浏览文件 @ 2758bd9b
......@@ -31,6 +31,12 @@
<el-tab-pane label="预警面板" lazy>
<WarnningPane />
</el-tab-pane>
<el-tab-pane label="层级关系图" lazy>
<GraphChart />
</el-tab-pane>
<el-tab-pane label="引力关系图" lazy>
<GraphTreeChart />
</el-tab-pane>
</el-tabs>
</div>
</el-space>
......@@ -51,6 +57,8 @@ import TextPage from './TextPage/index.vue';
import ImagesPage from './Images/index.vue';
import PeoplePage from './People/index.vue';
import WarnningPane from './WarnningPane/index.vue'
import GraphChart from './GraphChart/index.vue'
import GraphTreeChart from './GraphTreeChart/index.vue'
</script>
<style lang="scss" scoped>
......
src/views/marketAccessRestrictions/marketAccessLayout/overview/337/index.vue
浏览文件 @ 2758bd9b
......@@ -293,26 +293,7 @@ const links = ref([
{ source: 12, target: 7, label: { show: true, formatter: '合作' } },
{ source: 13, target: 7, label: { show: true, formatter: '合作' } },
{ source: 14, target: 7, label: { show: true, formatter: '合作' } },
{ source: 15, target: 7, label: { show: true, formatter: '合作' } },
// { source: 0, target: 1, value: 1 },
// { source: 1, target: 8, value: 2 },
// { source: 1, target: 2, value: 1 },
// { source: 8, target: 11, value: 1 },
// { source: 8, target: 9, value: 1 },
// { source: 2, target: 5, value: 1 },
// { source: 2, target: 12, value: 1 },
// { source: 3, target: 10, value: 1 },
// { source: 3, target: 15, value: 1 },
// { source: 3, target: 13, value: 1 },
// { source: 4, target: 5, value: 1 },
// { source: 4, target: 12, value: 1 },
// { source: 5, target: 6, value: 1 },
// { source: 6, target: 14, value: 1 },
// { source: 7, target: 14, value: 1 },
// { source: 9, target: 10, value: 1 },
// { source: 10, target: 15, value: 1 },
// { source: 11, target: 13, value: 1 },
// { source: 12, target: 14, value: 1 },
{ source: 15, target: 7, label: { show: true, formatter: '合作', color: 'red', borderColor: 'red' } },
]);
......
src/views/marketAccessRestrictions/marketAccessLayout/overview/337/utils/graphChart.js
浏览文件 @ 2758bd9b
......@@ -84,14 +84,46 @@ const getGraphChart = (nodes, links) => {
show: true,
position: 'middle',
fontSize: 14,
color: '#666',
color: '#333',
backgroundColor: 'rgba(255,255,255,0.9)',
borderColor: '#bbb',
borderWidth: 1,
borderRadius: 4,
padding: [4, 8],
formatter: params => params.data.label ? params.data.label.formatter : ''
}
// edgeLabel: {
// show: true,
// position: 'middle',
// // fontSize: 14,
// // backgroundColor: 'rgba(255,255,255,0.9)',
// // borderColor: '#bbb',
// borderWidth: 1,
// borderRadius: 4,
// padding: [4, 8],
// // 核心：使用 formatter 函数
// formatter: function (params) {
// console.log('完整 params:', params);
// console.log('label 数据:', params.data.label);
// // 获取标签的文本内容，它存储在 params.data.label.formatter 里
// const labelText = params.data.label?.formatter || '';
// // 定义一个颜色映射
// const colorMap = {
// '合作': '#52c41a', // 绿色
// '持股': '#faad14', // 橙色
// '从属': '#f5222d' // 红色
// };
// // 根据文本内容获取对应的颜色，如果没有定义则使用默认的灰色
// const color = colorMap[labelText] || '#666';
// // 返回一个带内联样式的 HTML 字符串
// return `<span style="color: ${color};">${labelText}</span>`;
// }
// }
}],
// color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de']
};
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论