Skip to content

I
incubator-echarts

x649585723 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

体验新版 GitCode，发现更多精彩内容 >>

提交 e0a70e6a 编写于 作者: S sushuang
浏览文件
操作

fix(graph): fix hover style disabled by focusNodeAdjacency

上级 8152f8bf
隐藏空白更改
内联 并排
Showing with 152 addition and 111 deletion
src/chart/graph/GraphView.js
浏览文件 @ e0a70e6a
...@@ -27,6 +27,8 @@ import {onIrrelevantElement} from '../../component/helper/cursorHelper'; ...@@ -27,6 +27,8 @@ import {onIrrelevantElement} from '../../component/helper/cursorHelper';
import * as graphic from '../../util/graphic'; import * as graphic from '../../util/graphic';
import adjustEdge from './adjustEdge'; import adjustEdge from './adjustEdge';
var FOCUS_ADJACENCY = '__focusNodeAdjacency';
var UNFOCUS_ADJACENCY = '__unfocusNodeAdjacency';
var nodeOpacityPath = ['itemStyle', 'opacity']; var nodeOpacityPath = ['itemStyle', 'opacity'];
var lineOpacityPath = ['lineStyle', 'opacity']; var lineOpacityPath = ['lineStyle', 'opacity'];
...@@ -151,24 +153,23 @@ export default echarts.extendChartView({ ...@@ -151,24 +153,23 @@ export default echarts.extendChartView({
} }
el.setDraggable(draggable && forceLayout); el.setDraggable(draggable && forceLayout);
el.off('mouseover', el.__focusNodeAdjacency); el[FOCUS_ADJACENCY] && el.off('mouseover', el[FOCUS_ADJACENCY]);
el.off('mouseout', el.__unfocusNodeAdjacency); el[UNFOCUS_ADJACENCY] && el.off('mouseout', el[UNFOCUS_ADJACENCY]);
if (itemModel.get('focusNodeAdjacency')) { if (itemModel.get('focusNodeAdjacency')) {
el.on('mouseover', el.__focusNodeAdjacency = function () { el.on('mouseover', el[FOCUS_ADJACENCY] = function () {
api.dispatchAction({ api.dispatchAction({
type: 'focusNodeAdjacency', type: 'focusNodeAdjacency',
seriesId: seriesModel.id, seriesId: seriesModel.id,
dataIndex: el.dataIndex dataIndex: el.dataIndex
}); });
}); });
el.on('mouseout', el.__unfocusNodeAdjacency = function () { el.on('mouseout', el[UNFOCUS_ADJACENCY] = function () {
api.dispatchAction({ api.dispatchAction({
type: 'unfocusNodeAdjacency', type: 'unfocusNodeAdjacency',
seriesId: seriesModel.id seriesId: seriesModel.id
}); });
}); });
} }
}, this); }, this);
...@@ -176,18 +177,18 @@ export default echarts.extendChartView({ ...@@ -176,18 +177,18 @@ export default echarts.extendChartView({
data.graph.eachEdge(function (edge) { data.graph.eachEdge(function (edge) {
var el = edge.getGraphicEl(); var el = edge.getGraphicEl();
el.off('mouseover', el.__focusNodeAdjacency); el[FOCUS_ADJACENCY] && el.off('mouseover', el[FOCUS_ADJACENCY]);
el.off('mouseout', el.__unfocusNodeAdjacency); el[UNFOCUS_ADJACENCY] && el.off('mouseout', el[UNFOCUS_ADJACENCY]);
if (edge.getModel().get('focusNodeAdjacency')) { if (edge.getModel().get('focusNodeAdjacency')) {
el.on('mouseover', el.__focusNodeAdjacency = function () { el.on('mouseover', el[FOCUS_ADJACENCY] = function () {
api.dispatchAction({ api.dispatchAction({
type: 'focusNodeAdjacency', type: 'focusNodeAdjacency',
seriesId: seriesModel.id, seriesId: seriesModel.id,
edgeDataIndex: edge.dataIndex edgeDataIndex: edge.dataIndex
}); });
}); });
el.on('mouseout', el.__unfocusNodeAdjacency = function () { el.on('mouseout', el[UNFOCUS_ADJACENCY] = function () {
api.dispatchAction({ api.dispatchAction({
type: 'unfocusNodeAdjacency', type: 'unfocusNodeAdjacency',
seriesId: seriesModel.id seriesId: seriesModel.id
......
test/graph-simple.html
浏览文件 @ e0a70e6a
...@@ -24,132 +24,170 @@ under the License. ...@@ -24,132 +24,170 @@ under the License.
<script src="lib/esl.js"></script> <script src="lib/esl.js"></script>
<script src="lib/config.js"></script> <script src="lib/config.js"></script>
<script src="lib/jquery.min.js"></script> <script src="lib/jquery.min.js"></script>
<script src="lib/testHelper.js"></script>
<link rel="stylesheet" href="lib/reset.css" />
</head> </head>
<body> <body>
<style>
html, body, #main { <div id="main0"></div>
width: 100%; <div id="main1"></div>
height: 100%;
margin: 0;
}
</style>
hover node3, edge label should be displayed.
节点1 should display value in tooltip.
<div id="main"></div>
<script> <script>
require([ require([
'echarts', 'echarts',
// 'echarts/chart/graph',
// 'echarts/component/title',
// 'echarts/component/legend',
// 'echarts/component/tooltip',
// 'zrender/vml/vml',
'theme/vintage' 'theme/vintage'
], function (echarts) { ], function (echarts) {
var chart = echarts.init(document.getElementById('main'), 'vintage'); function getOption(focusNodeAdjacency) {
return {
var option = { tooltip: {},
tooltip: {}, animationDurationUpdate: 1500,
animationDurationUpdate: 1500, animationEasingUpdate: 'quinticInOut',
animationEasingUpdate: 'quinticInOut', series : [
series : [ {
{ type: 'graph',
type: 'graph', symbolSize: 20,
symbolSize: 20, roam: true,
roam: true,
label: {
normal: {
show: true
}
},
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
normal: {
textStyle: {
fontSize: 20
}
}
},
focusNodeAdjacency: true,
data: [{
name: '节点1',
x: 300,
y: 300,
value: 2321
}, {
name: '节点2',
x: 800,
y: 300
}, {
name: '节点3',
x: 550,
y: 100
}, {
name: '节点4',
x: 550,
y: 500
}],
// links: [],
links: [{
source: 0,
target: 1,
symbolSize: [5, 20],
label: { label: {
normal: { normal: {
show: true show: true
// position: 'end'
} }
}, },
lineStyle: { edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
normal: { normal: {
textStyle: {
color: 'green',
fontSize: 30
}
},
emphasis: {
textStyle: {
color: '#987654'
}
}
},
lineStyle: {
width: 10
},
focusNodeAdjacency: focusNodeAdjacency,
data: [{
name: '节点1',
x: 300,
y: 300,
value: 'set_style_on_item'
}, {
name: '节点2',
x: 800,
y: 300
}, {
name: '节点3',
x: 550,
y: 100
}, {
name: '节点4',
x: 550,
y: 500
}],
// links: [],
links: [{
source: 0,
target: 1,
symbolSize: [5, 20],
label: {
normal: {
show: true
// position: 'end'
}
},
lineStyle: {
width: 5, width: 5,
opacity: 1,
curveness: 0.2 curveness: 0.2
},
emphasis: {
lineStyle: {
color: 'blue',
width: 20,
opacity: 0.1
},
label: {
fontSize: 40,
color: 'red'
}
} }
} }, {
}, { source: '节点2',
source: '节点2', target: '节点1',
target: '节点1', label: {
label: { normal: {
normal: { show: true
show: true }
},
lineStyle: {
normal: {
curveness: 0.2
}
} }
}, }, {
source: '节点1',
target: '节点3',
emphasis: {
label: {
show: true
}
}
}, {
source: '节点2',
target: '节点3'
}, {
source: '节点2',
target: '节点4'
}, {
source: '节点1',
target: '节点4'
}],
lineStyle: { lineStyle: {
normal: { curveness: 0.2 } normal: {
} curveness: 0
}, {
source: '节点1',
target: '节点3',
emphasis: {
label: {
show: true
} }
} }
}, {
source: '节点2',
target: '节点3'
}, {
source: '节点2',
target: '节点4'
}, {
source: '节点1',
target: '节点4'
}],
lineStyle: {
normal: {
curveness: 0
}
} }
} ]
] };
}; }
var chart0 = testHelper.create(echarts, 'main0', {
title: [
'[focusNodeAdjacency: **true**]',
'hover node3, edge label should be displayed.',
'节点1 should display value in tooltip.',
'series.lineStyle: 5',
'hover set_style_on_item, lineStyle: {opacity 0.1, color: "blue", width: 20}, label: {color: "red", fontSize: 40}.',
'focusNodeAdjacency triggered and returned, opacity change MUST NOT be kept'
],
option: getOption(true),
height: 500
});
chart.setOption(option); var chart1 = testHelper.create(echarts, 'main1', {
title: [
'[focusNodeAdjacency: **false**]',
'hover node3, edge label should be displayed.',
'节点1 should display value in tooltip.',
'hover set_style_on_item, lineStyle: {opacity 0.1, color: "blue", width: 20}, label: {color: "red", fontSize: 40}.',
'focusNodeAdjacency triggered and returned, opacity change MUST NOT be kept'
],
option: getOption(false),
height: 500
});
}); });
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
test/tmp-base.html
浏览文件 @ e0a70e6a
...@@ -28,6 +28,7 @@ under the License. ...@@ -28,6 +28,7 @@ under the License.
<script src="lib/jquery.min.js"></script> <script src="lib/jquery.min.js"></script>
<script src="lib/facePrint.js"></script> <script src="lib/facePrint.js"></script>
<script src="lib/testHelper.js"></script> <script src="lib/testHelper.js"></script>
<!-- <script src="ut/lib/canteen.js"></script> -->
<link rel="stylesheet" href="lib/reset.css" /> <link rel="stylesheet" href="lib/reset.css" />
</head> </head>
<body> <body>
...@@ -54,7 +55,8 @@ under the License. ...@@ -54,7 +55,8 @@ under the License.
// }); // });
var chart = testHelper.create(echarts, 'main0', { var chart = testHelper.create(echarts, 'main0', {
option: option option: option,
// recordCanvas: true
}); });
}); });
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或