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';
import * as graphic from '../../util/graphic';
import adjustEdge from './adjustEdge';
var FOCUS_ADJACENCY = '__focusNodeAdjacency';
var UNFOCUS_ADJACENCY = '__unfocusNodeAdjacency';
var nodeOpacityPath = ['itemStyle', 'opacity'];
var lineOpacityPath = ['lineStyle', 'opacity'];
......@@ -151,24 +153,23 @@ export default echarts.extendChartView({
}
el.setDraggable(draggable && forceLayout);
el.off('mouseover', el.__focusNodeAdjacency);
el.off('mouseout', el.__unfocusNodeAdjacency);
el[FOCUS_ADJACENCY] && el.off('mouseover', el[FOCUS_ADJACENCY]);
el[UNFOCUS_ADJACENCY] && el.off('mouseout', el[UNFOCUS_ADJACENCY]);
if (itemModel.get('focusNodeAdjacency')) {
el.on('mouseover', el.__focusNodeAdjacency = function () {
el.on('mouseover', el[FOCUS_ADJACENCY] = function () {
api.dispatchAction({
type: 'focusNodeAdjacency',
seriesId: seriesModel.id,
dataIndex: el.dataIndex
});
});
el.on('mouseout', el.__unfocusNodeAdjacency = function () {
el.on('mouseout', el[UNFOCUS_ADJACENCY] = function () {
api.dispatchAction({
type: 'unfocusNodeAdjacency',
seriesId: seriesModel.id
});
});
}
}, this);
......@@ -176,18 +177,18 @@ export default echarts.extendChartView({
data.graph.eachEdge(function (edge) {
var el = edge.getGraphicEl();
el.off('mouseover', el.__focusNodeAdjacency);
el.off('mouseout', el.__unfocusNodeAdjacency);
el[FOCUS_ADJACENCY] && el.off('mouseover', el[FOCUS_ADJACENCY]);
el[UNFOCUS_ADJACENCY] && el.off('mouseout', el[UNFOCUS_ADJACENCY]);
if (edge.getModel().get('focusNodeAdjacency')) {
el.on('mouseover', el.__focusNodeAdjacency = function () {
el.on('mouseover', el[FOCUS_ADJACENCY] = function () {
api.dispatchAction({
type: 'focusNodeAdjacency',
seriesId: seriesModel.id,
edgeDataIndex: edge.dataIndex
});
});
el.on('mouseout', el.__unfocusNodeAdjacency = function () {
el.on('mouseout', el[UNFOCUS_ADJACENCY] = function () {
api.dispatchAction({
type: 'unfocusNodeAdjacency',
seriesId: seriesModel.id
......
test/graph-simple.html
浏览文件 @ e0a70e6a
......@@ -24,34 +24,24 @@ under the License.
<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%;
margin: 0;
}
</style>
hover node3, edge label should be displayed.
节点1 should display value in tooltip.
<div id="main"></div>
<div id="main0"></div>
<div id="main1"></div>
<script>
require([
'echarts',
// 'echarts/chart/graph',
// 'echarts/component/title',
// 'echarts/component/legend',
// 'echarts/component/tooltip',
// 'zrender/vml/vml',
'theme/vintage'
], function (echarts) {
var chart = echarts.init(document.getElementById('main'), 'vintage');
var option = {
function getOption(focusNodeAdjacency) {
return {
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
......@@ -70,16 +60,25 @@ under the License.
edgeLabel: {
normal: {
textStyle: {
fontSize: 20
color: 'green',
fontSize: 30
}
},
emphasis: {
textStyle: {
color: '#987654'
}
}
},
focusNodeAdjacency: true,
lineStyle: {
width: 10
},
focusNodeAdjacency: focusNodeAdjacency,
data: [{
name: '节点1',
x: 300,
y: 300,
value: 2321
value: 'set_style_on_item'
}, {
name: '节点2',
x: 800,
......@@ -105,9 +104,19 @@ under the License.
}
},
lineStyle: {
normal: {
width: 5,
opacity: 1,
curveness: 0.2
},
emphasis: {
lineStyle: {
color: 'blue',
width: 20,
opacity: 0.1
},
label: {
fontSize: 40,
color: 'red'
}
}
}, {
......@@ -119,7 +128,9 @@ under the License.
}
},
lineStyle: {
normal: { curveness: 0.2 }
normal: {
curveness: 0.2
}
}
}, {
source: '节点1',
......@@ -147,9 +158,36 @@ under the License.
}
]
};
}
chart.setOption(option);
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
});
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>
</body>
</html>
\ No newline at end of file
test/tmp-base.html
浏览文件 @ e0a70e6a
......@@ -28,6 +28,7 @@ under the License.
<script src="lib/jquery.min.js"></script>
<script src="lib/facePrint.js"></script>
<script src="lib/testHelper.js"></script>
<!-- <script src="ut/lib/canteen.js"></script> -->
<link rel="stylesheet" href="lib/reset.css" />
</head>
<body>
......@@ -54,7 +55,8 @@ under the License.
// });
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.
先完成此消息的编辑！
想要评论请 注册 或