Merge pull request #18834 from linghaoSu/fix/sankey-emphasis

fix(sankey): fix other state color is 'target/source/gradient'

src/chart/sankey/SankeyView.ts

@@ -20,7 +20,7 @@
 import * as graphic from '../../util/graphic';
 import { enterEmphasis, leaveEmphasis, toggleHoverEmphasis, setStatesStylesFromModel } from '../../util/states';
 import { LayoutOrient, ECElement } from '../../util/types';
-import { PathProps } from 'zrender/src/graphic/Path';
+import type { PathProps, PathStyleProps } from 'zrender/src/graphic/Path';
 import SankeySeriesModel, { SankeyEdgeItemOption, SankeyNodeItemOption } from './SankeySeries';
 import ChartView from '../../view/Chart';
 import GlobalModel from '../../model/Global';
@@ -30,6 +30,7 @@ import { RectLike } from 'zrender/src/core/BoundingRect';
 import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
 import { getECData } from '../../util/innerStore';
 import { isString, retrieve3 } from 'zrender/src/core/util';
+import type { GraphEdge } from '../../data/Graph';
 
 class SankeyPathShape {
  x1 = 0;
@@ -195,30 +196,8 @@ class SankeyView extends ChartView {
 
  curve.useStyle(lineStyleModel.getItemStyle());
  // Special color, use source node color or target node color
- switch (curve.style.fill) {
- case 'source':
- curve.style.fill = edge.node1.getVisual('color');
- curve.style.decal = edge.node1.getVisual('style').decal;
- break;
- case 'target':
- curve.style.fill = edge.node2.getVisual('color');
- curve.style.decal = edge.node2.getVisual('style').decal;
- break;
- case 'gradient':
- const sourceColor = edge.node1.getVisual('color');
- const targetColor = edge.node2.getVisual('color');
- if (isString(sourceColor) && isString(targetColor)) {
- curve.style.fill = new graphic.LinearGradient(
- 0, 0, +(orient === 'horizontal'), +(orient === 'vertical'), [{
- color: sourceColor,
- offset: 0
- }, {
- color: targetColor,
- offset: 1
- }]
- );
- }
- }
+ applyCurveStyle(curve.style, orient, edge);
+
 
  const defaultEdgeLabelText = `${edgeModel.get('value')}`;
  const edgeLabelStateModels = getLabelStatesModels(edgeModel, 'edgeLabel');
@@ -250,7 +229,13 @@ class SankeyView extends ChartView {
 
  const emphasisModel = edgeModel.getModel('emphasis');
 
- setStatesStylesFromModel(curve, edgeModel, 'lineStyle', (model) => model.getItemStyle());
+ setStatesStylesFromModel(curve, edgeModel, 'lineStyle', (model) => {
+ const style = model.getItemStyle();
+
+ applyCurveStyle(style, orient, edge);
+
+ return style;
+ });
 
  group.add(curve);
 
@@ -362,6 +347,39 @@ class SankeyView extends ChartView {
  }
 }
 
+/**
+ * Special color, use source node color or target node color
+ * @param curveProps curve's style to parse
+ * @param orient direction
+ * @param edge current curve data
+ */
+function applyCurveStyle(curveProps: PathStyleProps, orient: 'horizontal' | 'vertical', edge: GraphEdge) {
+ switch (curveProps.fill) {
+ case 'source':
+ curveProps.fill = edge.node1.getVisual('color');
+ curveProps.decal = edge.node1.getVisual('style').decal;
+ break;
+ case 'target':
+ curveProps.fill = edge.node2.getVisual('color');
+ curveProps.decal = edge.node2.getVisual('style').decal;
+ break;
+ case 'gradient':
+ const sourceColor = edge.node1.getVisual('color');
+ const targetColor = edge.node2.getVisual('color');
+ if (isString(sourceColor) && isString(targetColor)) {
+ curveProps.fill = new graphic.LinearGradient(
+ 0, 0, +(orient === 'horizontal'), +(orient === 'vertical'), [{
+ color: sourceColor,
+ offset: 0
+ }, {
+ color: targetColor,
+ offset: 1
+ }]
+ );
+ }
+ }
+}
+
 // Add animation to the view
 function createGridClipShape(rect: RectLike, seriesModel: SankeySeriesModel, cb: () => void) {
  const rectEl = new graphic.Rect({