3d4e4d90 by lihua

fix: 优化桑基图

1 parent 137c2960
......@@ -82,7 +82,7 @@ watch(() => props.treeData, (val) => {
const renderGraph = (graph: any, lineageData: any) => {
if (!graph || !lineageData) return;
graph.setMinZoom(0.7);
graph.setMinZoom(1);
graph.setMaxZoom(1);
graph.data(lineageData);
graph.render();
......@@ -265,7 +265,7 @@ const initGraph = () => {
],
},
defaultNode: {
size: 24,
size: 20,
anchorPoints: [
[0, 0.5],
[1, 0.5],
......@@ -292,7 +292,7 @@ const initGraph = () => {
return 16;
},
getVGap: function getVGap() {
return 25;
return 15;
},
getHGap: function getHGap() {
return 120;
......@@ -306,7 +306,7 @@ const initGraph = () => {
label: handleLabelLength((node.isField ? node.metaStandardId : node.standardName) as string),
collapsed: node.children?.length ? false : true,
labelCfg: {
offset: 10,
offset: 7,
style: {
fontSize: 13,
fill: '#212121',
......@@ -369,7 +369,7 @@ const observeResize = () => {
return;
}
graphRef.value.changeSize(width, height);
graphRef.value.setMinZoom(0.7);
graphRef.value.setMinZoom(1);
graphRef.value.setMaxZoom(1);
graphRef.value.fitView(40, { direction: 'both' });
graphRef.value.fitCenter();
......@@ -385,7 +385,7 @@ const observeResize = () => {
return;
}
graphRef.value.changeSize(width, height);
graphRef.value.setMinZoom(0.7);
graphRef.value.setMinZoom(1);
graphRef.value.setMaxZoom(1);
graphRef.value.fitView(40, { direction: 'both' });
graphRef.value.fitCenter();
......@@ -607,7 +607,7 @@ defineExpose({
overflow-y: auto;
.title {
font-size: 16px;
font-size: 14px;
color: #212121;
line-height: 24px;
font-weight: 600;
......@@ -615,7 +615,7 @@ defineExpose({
.row {
margin-top: 8px;
font-size: 14px;
font-size: 12px;
color: #666666;
word-break: break-all;
line-height: 21px;
......
......@@ -78,6 +78,7 @@ const sankeyInstance: any = ref();
const containerRef = ref();
const setChartsOption = () => {
let option = {
tooltip: {
trigger: 'item',
......@@ -85,19 +86,33 @@ const setChartsOption = () => {
if (params.data.name) {
return null;
}
return params.data.source + ' --> ' + params.data.target
return params.data.source + ' > ' + params.data.target
}
},
color: ["#3DBCBE", "#6b67d1", "#7BBCE0", "#2B8EF3", "#51dca2", "#E19D46"],
series: [
{
type: 'sankey',
top: 80,
bottom: 40,
top: 60,
bottom: 20,
draggable: false,
left: 40,
right: 80,
data: props.names,
left: 50,
right: 100,
label: {
fontSize: 10,
},
data: props.names?.map(n => {
if (n.isLast) {
return {
...n,
label: {
width: 97,
overflow: 'breakAll'
}
}
}
return n;
}),
links: props.treeData,
lineStyle: {
color: 'source',
......@@ -113,10 +128,9 @@ const setChartsOption = () => {
const resizeObserver = ref();
const observeResize = () => {
resizeObserver.value = new ResizeObserver(() => {
window.addEventListener('resize', (e) => {
sankeyInstance.value?.resize();
});
resizeObserver.value.observe(containerRef.value);
}
onMounted(() => {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!