Skip to content

Commit

Permalink
Merge pull request #11729 from deqingli/graph
Browse files Browse the repository at this point in the history 
Fix emphasis line style options do not work on Sankey charts #9942
  • Loading branch information
@deqingli
deqingli authored Dec 2, 2019
2 parents 0984b09 + 29e8446 commit 65a68e3
Show file tree
Hide file tree
Showing 4 changed files with 82 additions and 37 deletions.
4 changes: 2 additions & 2 deletions src/chart/graph/GraphView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,7 @@ export default echarts.extendChartView({
},

focusNodeAdjacency: function (seriesModel, ecModel, api, payload) {
var data = this._model.getData();
var data = seriesModel.getData();
var graph = data.graph;
var dataIndex = payload.dataIndex;
var edgeDataIndex = payload.edgeDataIndex;
Expand Down Expand Up @@ -308,7 +308,7 @@ export default echarts.extendChartView({
},

unfocusNodeAdjacency: function (seriesModel, ecModel, api, payload) {
var graph = this._model.getData().graph;
var graph = seriesModel.getData().graph;

graph.eachNode(function (node) {
fadeOutItem(node, nodeOpacityPath);
Expand Down
2 changes: 1 addition & 1 deletion src/chart/sankey/SankeySeries.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,7 @@ var SankeySeries = SeriesModel.extend({
show: true
},
lineStyle: {
opacity: 0.6
opacity: 0.5
}
},

Expand Down
67 changes: 48 additions & 19 deletions src/chart/sankey/SankeyView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,16 +22,18 @@ import * as echarts from '../../echarts';
import * as zrUtil from 'zrender/src/core/util';

var nodeOpacityPath = ['itemStyle', 'opacity'];
var hoverNodeOpacityPath = ['emphasis', 'itemStyle', 'opacity'];
var lineOpacityPath = ['lineStyle', 'opacity'];
var hoverLineOpacityPath = ['emphasis', 'lineStyle', 'opacity'];

function getItemOpacity(item, opacityPath) {
return item.getVisual('opacity') || item.getModel().get(opacityPath);
}

function fadeOutItem(item, opacityPath, opacityRatio) {
var el = item.getGraphicEl();

var opacity = getItemOpacity(item, opacityPath);

if (opacityRatio != null) {
opacity == null && (opacity = 1);
opacity *= opacityRatio;
Expand All @@ -49,12 +51,14 @@ function fadeInItem(item, opacityPath) {
var opacity = getItemOpacity(item, opacityPath);
var el = item.getGraphicEl();

el.highlight && el.highlight();
el.traverse(function (child) {
if (child.type !== 'group') {
child.setStyle('opacity', opacity);
}
});

// Support emphasis here.
el.highlight && el.highlight();
}

var SankeyShape = graphic.extendShape({
Expand Down Expand Up @@ -92,6 +96,14 @@ var SankeyShape = graphic.extendShape({
);
}
ctx.closePath();
},

highlight: function () {
this.trigger('emphasis');
},

downplay: function () {
this.trigger('normal');
}
});

Expand Down Expand Up @@ -274,8 +286,19 @@ export default echarts.extendChartView({
el.cursor = 'move';
}

el.highlight = function () {
this.trigger('emphasis');
};

el.downplay = function () {
this.trigger('normal');
};

el.focusNodeAdjHandler && el.off('mouseover', el.focusNodeAdjHandler);
el.unfocusNodeAdjHandler && el.off('mouseout', el.unfocusNodeAdjHandler);

if (itemModel.get('focusNodeAdjacency')) {
el.off('mouseover').on('mouseover', function () {
el.on('mouseover', el.focusNodeAdjHandler = function () {
if (!sankeyView._focusAdjacencyDisabled) {
sankeyView._clearTimer();
api.dispatchAction({
Expand All @@ -285,7 +308,8 @@ export default echarts.extendChartView({
});
}
});
el.off('mouseout').on('mouseout', function () {

el.on('mouseout', el.unfocusNodeAdjHandler = function () {
if (!sankeyView._focusAdjacencyDisabled) {
sankeyView._dispatchUnfocus(api);
}
Expand All @@ -295,8 +319,12 @@ export default echarts.extendChartView({

edgeData.eachItemGraphicEl(function (el, dataIndex) {
var edgeModel = edgeData.getItemModel(dataIndex);

el.focusNodeAdjHandler && el.off('mouseover', el.focusNodeAdjHandler);
el.unfocusNodeAdjHandler && el.off('mouseout', el.unfocusNodeAdjHandler);

if (edgeModel.get('focusNodeAdjacency')) {
el.off('mouseover').on('mouseover', function () {
el.on('mouseover', el.focusNodeAdjHandler = function () {
if (!sankeyView._focusAdjacencyDisabled) {
sankeyView._clearTimer();
api.dispatchAction({
Expand All @@ -306,7 +334,8 @@ export default echarts.extendChartView({
});
}
});
el.off('mouseout').on('mouseout', function () {

el.on('mouseout', el.unfocusNodeAdjHandler = function () {
if (!sankeyView._focusAdjacencyDisabled) {
sankeyView._dispatchUnfocus(api);
}
Expand Down Expand Up @@ -347,7 +376,7 @@ export default echarts.extendChartView({
},

focusNodeAdjacency: function (seriesModel, ecModel, api, payload) {
var data = this._model.getData();
var data = seriesModel.getData();
var graph = data.graph;
var dataIndex = payload.dataIndex;
var itemModel = data.getItemModel(dataIndex);
Expand All @@ -367,46 +396,46 @@ export default echarts.extendChartView({
});

if (node) {
fadeInItem(node, nodeOpacityPath);
fadeInItem(node, hoverNodeOpacityPath);
var focusNodeAdj = itemModel.get('focusNodeAdjacency');
if (focusNodeAdj === 'outEdges') {
zrUtil.each(node.outEdges, function (edge) {
if (edge.dataIndex < 0) {
return;
}
fadeInItem(edge, lineOpacityPath);
fadeInItem(edge.node2, nodeOpacityPath);
fadeInItem(edge, hoverLineOpacityPath);
fadeInItem(edge.node2, hoverNodeOpacityPath);
});
}
else if (focusNodeAdj === 'inEdges') {
zrUtil.each(node.inEdges, function (edge) {
if (edge.dataIndex < 0) {
return;
}
fadeInItem(edge, lineOpacityPath);
fadeInItem(edge.node1, nodeOpacityPath);
fadeInItem(edge, hoverLineOpacityPath);
fadeInItem(edge.node1, hoverNodeOpacityPath);
});
}
else if (focusNodeAdj === 'allEdges') {
zrUtil.each(node.edges, function (edge) {
if (edge.dataIndex < 0) {
return;
}
fadeInItem(edge, lineOpacityPath);
fadeInItem(edge.node1, nodeOpacityPath);
fadeInItem(edge.node2, nodeOpacityPath);
fadeInItem(edge, hoverLineOpacityPath);
(edge.node1 !== node) && fadeInItem(edge.node1, hoverNodeOpacityPath);
(edge.node2 !== node) && fadeInItem(edge.node2, hoverNodeOpacityPath);
});
}
}
if (edge) {
fadeInItem(edge, lineOpacityPath);
fadeInItem(edge.node1, nodeOpacityPath);
fadeInItem(edge.node2, nodeOpacityPath);
fadeInItem(edge, hoverLineOpacityPath);
fadeInItem(edge.node1, hoverNodeOpacityPath);
fadeInItem(edge.node2, hoverNodeOpacityPath);
}
},

unfocusNodeAdjacency: function (seriesModel, ecModel, api, payload) {
var graph = this._model.getGraph();
var graph = seriesModel.getGraph();

graph.eachNode(function (node) {
fadeOutItem(node, nodeOpacityPath);
Expand Down
46 changes: 31 additions & 15 deletions test/sankey-vertical.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,21 +25,16 @@
<script src="lib/esl.js"></script>
<script src="lib/config.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/testHelper.js"></script>
<link rel="stylesheet" href="lib/reset.css"/>
</head>
<body>
<style>
html, body, #main {
width: 100%;
height: 100%;
/*border: 1px solid #000;*/
}
</style>
<div id="main"><div>

<div id="main"></div>

<script>
require(['echarts'], function (echarts) {

var chart = echarts.init(document.getElementById('main'), null, {});

window.onresize = function () {
chart.resize();
};
Expand Down Expand Up @@ -117,7 +112,13 @@
var testData = {
nodes: [
{
name: 'a'
name: 'a',
emphasis: {
itemStyle: {
color: 'yellow',
opacity: 0.6
}
}
},
{
name: 'b'
Expand All @@ -139,7 +140,13 @@
{
source: 'a',
target: 'a1',
value: 5
value: 5,
emphasis: {
lineStyle: {
color: 'green',
opacity: 0.2
}
}
},
{
source: 'e',
Expand Down Expand Up @@ -169,7 +176,7 @@
]
};

chart.setOption({
var option = {
color: ['#67001f', '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#d1e5f0', '#92c5de', '#4393c3', '#2166ac', '#053061'],
tooltip: {
trigger: 'item',
Expand All @@ -189,12 +196,21 @@
},
lineStyle: {
normal: {
color: 'source',
curveness: 0.5
color: 'source'
}
}
}
]
};

var chart = testHelper.create(echarts, 'main' , {
title: [
'1. when hover on node a1 the edge a1-a is green with opacity 0.2 and the node a is yellow with opacity 0.6',
'2. when hover on edge a1-a the color is green with opacity 0.2 and the node a is yellow with opacity 0.6',
'3. when hover on node a the color is yellow with opacity 0.6 and the edge a1-a is green with opacity 0.2'
],
option: option,
height: 700
});
});
</script>
Expand Down

0 comments on commit 65a68e3

Please sign in to comment.