Merge pull request #16767 from susiwen8/7233

feat(sankey): `sankey` support `edgeLabel`
apache · Oct 16, 2022 · 79dffe6 · 79dffe6
2 parents 069b692 + 1a23b9d
commit 79dffe6
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 1 deletion.
diff --git a/src/chart/sankey/SankeySeries.ts b/src/chart/sankey/SankeySeries.ts
@@ -85,6 +85,7 @@ export interface SankeyEdgeItemOption extends
         StatesOptionMixin<SankeyEdgeStateOption, ExtraStateOption>,
         GraphEdgeItemObject<OptionDataValueNumeric> {
     focusNodeAdjacency?: FocusNodeAdjacency
+    edgeLabel?: SeriesLabelOption
 }
 
 export interface SankeyLevelOption extends SankeyNodeStateOption, SankeyEdgeStateOption {
@@ -137,6 +138,10 @@ export interface SankeySeriesOption
     links?: SankeyEdgeItemOption[]
 
     levels?: SankeyLevelOption[]
+
+    edgeLabel?: SeriesLabelOption & {
+        position?: 'inside'
+    }
 }
 
 class SankeySeriesModel extends SeriesModel<SankeySeriesOption> {
@@ -298,6 +303,11 @@ class SankeySeriesModel extends SeriesModel<SankeySeriesOption> {
             fontSize: 12
         },
 
+        edgeLabel: {
+            show: false,
+            fontSize: 12
+        },
+
         levels: [],
 
         nodeAlign: 'justify',

diff --git a/src/chart/sankey/SankeyView.ts b/src/chart/sankey/SankeyView.ts
@@ -220,6 +220,16 @@ class SankeyView extends ChartView {
                     }
             }
 
+            setLabelStyle(
+                curve, getLabelStatesModels(edgeModel, 'edgeLabel'),
+                {
+                    labelFetcher: seriesModel,
+                    labelDataIndex: edge.dataIndex,
+                    defaultText: `${edgeModel.get('value')}`
+                }
+            );
+            curve.setTextConfig({ position: 'inside' });
+
             const emphasisModel = edgeModel.getModel('emphasis');
 
             setStatesStylesFromModel(curve, edgeModel, 'lineStyle', (model) => model.getItemStyle());

diff --git 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<SankeyEdgeItemOption>().get('lineStyle');
+                edge.setVisual('style', edgeStyle);
+            });
+        }
     });
 }
diff --git a/test/sankey-depth.html b/test/sankey-depth.html