From 3f093f715fe462f527b370fd74e0bffa0cf3b214 Mon Sep 17 00:00:00 2001 From: susiwen8 Date: Tue, 29 Mar 2022 23:15:58 +0800 Subject: [PATCH 1/3] feat(sankey): `sankey` support `edgeLabel` --- src/chart/sankey/SankeySeries.ts | 9 +++++++++ src/chart/sankey/SankeyView.ts | 15 +++++++++++++-- test/sankey-depth.html | 6 ++++++ 3 files changed, 28 insertions(+), 2 deletions(-) diff --git a/src/chart/sankey/SankeySeries.ts b/src/chart/sankey/SankeySeries.ts index 2ef1e77795..438549027a 100644 --- a/src/chart/sankey/SankeySeries.ts +++ b/src/chart/sankey/SankeySeries.ts @@ -85,6 +85,7 @@ export interface SankeyEdgeItemOption extends StatesOptionMixin, GraphEdgeItemObject { focusNodeAdjacency?: FocusNodeAdjacency + edgeLabel?: SeriesLabelOption } export interface SankeyLevelOption extends SankeyNodeStateOption, SankeyEdgeStateOption { @@ -137,6 +138,8 @@ export interface SankeySeriesOption links?: SankeyEdgeItemOption[] levels?: SankeyLevelOption[] + + edgeLabel?: SeriesLabelOption } class SankeySeriesModel extends SeriesModel { @@ -298,6 +301,12 @@ class SankeySeriesModel extends SeriesModel { fontSize: 12 }, + edgeLabel: { + show: false, + position: 'inside', + fontSize: 12 + }, + levels: [], nodeAlign: 'justify', diff --git a/src/chart/sankey/SankeyView.ts b/src/chart/sankey/SankeyView.ts index 5a9110f760..b483a8ff35 100644 --- a/src/chart/sankey/SankeyView.ts +++ b/src/chart/sankey/SankeyView.ts @@ -131,7 +131,7 @@ class SankeyView extends ChartView { group.y = layoutInfo.y; // generate a bezire Curve for each edge - graph.eachEdge(function (edge) { + graph.eachEdge(function (edge, idx) { const curve = new SankeyPath(); const ecData = getECData(curve); ecData.dataIndex = edge.dataIndex; @@ -193,7 +193,9 @@ class SankeyView extends ChartView { cpy2: cpy2 }); - curve.useStyle(lineStyleModel.getItemStyle()); + const style = lineStyleModel.getItemStyle(); + curve.useStyle(style); + edgeData.setItemVisual(idx, 'style', style); // Special color, use source node color or target node color switch (curve.style.fill) { case 'source': @@ -220,6 +222,15 @@ class SankeyView extends ChartView { } } + setLabelStyle( + curve, getLabelStatesModels(edgeModel, 'edgeLabel'), + { + labelFetcher: seriesModel, + labelDataIndex: edge.dataIndex, + defaultText: `${edgeModel.get('value')}` + } + ); + const emphasisModel = edgeModel.getModel('emphasis'); setStatesStylesFromModel(curve, edgeModel, 'lineStyle', (model) => model.getItemStyle()); diff --git a/test/sankey-depth.html b/test/sankey-depth.html index cf34ca6fd6..e409987a17 100644 --- a/test/sankey-depth.html +++ b/test/sankey-depth.html @@ -128,6 +128,12 @@ label: { position: 'left' }, + edgeLabel: { + show: true, + position: 'inside', + color: 'green', + fontSize: 20 + }, // Used to test when the data is null whether it is work well. // data: [], // links: [], From ed36fbd8febbb8a2d30c7762540d98a2f94bcc7d Mon Sep 17 00:00:00 2001 From: susiwen8 Date: Wed, 30 Mar 2022 20:34:25 +0800 Subject: [PATCH 2/3] feat(sankey): set edge style to sankeyVisual --- src/chart/sankey/SankeyView.ts | 6 ++---- src/chart/sankey/sankeyVisual.ts | 9 ++++++++- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/chart/sankey/SankeyView.ts b/src/chart/sankey/SankeyView.ts index b483a8ff35..e22ec45b2b 100644 --- a/src/chart/sankey/SankeyView.ts +++ b/src/chart/sankey/SankeyView.ts @@ -131,7 +131,7 @@ class SankeyView extends ChartView { group.y = layoutInfo.y; // generate a bezire Curve for each edge - graph.eachEdge(function (edge, idx) { + graph.eachEdge(function (edge) { const curve = new SankeyPath(); const ecData = getECData(curve); ecData.dataIndex = edge.dataIndex; @@ -193,9 +193,7 @@ class SankeyView extends ChartView { cpy2: cpy2 }); - const style = lineStyleModel.getItemStyle(); - curve.useStyle(style); - edgeData.setItemVisual(idx, 'style', style); + curve.useStyle(lineStyleModel.getItemStyle()); // Special color, use source node color or target node color switch (curve.style.fill) { case 'source': diff --git a/src/chart/sankey/sankeyVisual.ts b/src/chart/sankey/sankeyVisual.ts index 9425a615a9..a0f4add053 100644 --- a/src/chart/sankey/sankeyVisual.ts +++ b/src/chart/sankey/sankeyVisual.ts @@ -20,12 +20,13 @@ import * as zrUtil from 'zrender/src/core/util'; import VisualMapping from '../../visual/VisualMapping'; import GlobalModel from '../../model/Global'; -import SankeySeriesModel, { SankeyNodeItemOption } from './SankeySeries'; +import SankeySeriesModel, { SankeyEdgeItemOption, SankeyNodeItemOption } from './SankeySeries'; export default function sankeyVisual(ecModel: GlobalModel) { ecModel.eachSeriesByType('sankey', function (seriesModel: SankeySeriesModel) { const graph = seriesModel.getGraph(); const nodes = graph.nodes; + const edges = graph.edges; if (nodes.length) { let minValue = Infinity; let maxValue = -Infinity; @@ -59,5 +60,11 @@ export default function sankeyVisual(ecModel: GlobalModel) { } }); } + if (edges.length) { + zrUtil.each(edges, function (edge) { + const edgeStyle = edge.getModel().get('lineStyle'); + edge.setVisual('style', edgeStyle); + }); + } }); } \ No newline at end of file From 1a23b9da6a98a875250cab17f14275643fecbd24 Mon Sep 17 00:00:00 2001 From: susiwen8 Date: Thu, 5 May 2022 22:17:33 +0800 Subject: [PATCH 3/3] feat(sankey): `edgeLabel` only supports `inside` --- src/chart/sankey/SankeySeries.ts | 5 +++-- src/chart/sankey/SankeyView.ts | 1 + test/sankey-depth.html | 1 - 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/chart/sankey/SankeySeries.ts b/src/chart/sankey/SankeySeries.ts index 438549027a..bc07d45004 100644 --- a/src/chart/sankey/SankeySeries.ts +++ b/src/chart/sankey/SankeySeries.ts @@ -139,7 +139,9 @@ export interface SankeySeriesOption levels?: SankeyLevelOption[] - edgeLabel?: SeriesLabelOption + edgeLabel?: SeriesLabelOption & { + position?: 'inside' + } } class SankeySeriesModel extends SeriesModel { @@ -303,7 +305,6 @@ class SankeySeriesModel extends SeriesModel { edgeLabel: { show: false, - position: 'inside', fontSize: 12 }, diff --git a/src/chart/sankey/SankeyView.ts b/src/chart/sankey/SankeyView.ts index e22ec45b2b..5432908d48 100644 --- a/src/chart/sankey/SankeyView.ts +++ b/src/chart/sankey/SankeyView.ts @@ -228,6 +228,7 @@ class SankeyView extends ChartView { defaultText: `${edgeModel.get('value')}` } ); + curve.setTextConfig({ position: 'inside' }); const emphasisModel = edgeModel.getModel('emphasis'); diff --git a/test/sankey-depth.html b/test/sankey-depth.html index e409987a17..89a4d2d156 100644 --- a/test/sankey-depth.html +++ b/test/sankey-depth.html @@ -130,7 +130,6 @@ }, edgeLabel: { show: true, - position: 'inside', color: 'green', fontSize: 20 },