You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2019/06/17 15:24:51 UTC
[incubator-echarts] branch master updated (41b2142 -> 1f134a3)
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a change to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git.
from 41b2142 fix: update pointer when type is none, #fix 10570
new 4d979f8 Fix default hover style of label in circular layout of graph.
new 1f134a3 Enhance circular layout: based on symbol size and fix overlap when some value are very smaller than the max value. Fix #10462, Close #10615
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
src/chart/graph.js | 2 +-
src/chart/graph/GraphView.js | 55 +-
src/chart/graph/adjustEdge.js | 8 +-
src/chart/graph/circularLayout.js | 2 +-
src/chart/graph/circularLayoutHelper.js | 115 ++-
src/chart/graph/forceLayout.js | 2 +-
.../code.src.js => src/chart/graph/graphHelper.js | 42 +-
src/echarts.js | 2 +
src/util/graphic.js | 29 +-
test/force.html | 2 +-
test/force3.html | 2 +-
test/graph-circular.html | 767 +++++++++++++++++++++
12 files changed, 934 insertions(+), 94 deletions(-)
copy test/build/removeDEV/src/code.src.js => src/chart/graph/graphHelper.js (53%)
create mode 100644 test/graph-circular.html
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts] 01/02: Fix default hover style of label in
circular layout of graph.
Posted by su...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 4d979f8d075e8581bbc9c05f77fa81113c85ad32
Author: sushuang <su...@gmail.com>
AuthorDate: Wed Jun 12 13:54:16 2019 +0800
Fix default hover style of label in circular layout of graph.
---
src/chart/graph/GraphView.js | 28 ++++++++++++++++++----------
src/util/graphic.js | 29 ++++++++++++++++++++++++-----
2 files changed, 42 insertions(+), 15 deletions(-)
diff --git a/src/chart/graph/GraphView.js b/src/chart/graph/GraphView.js
index 1b5477f..e9f5529 100644
--- a/src/chart/graph/GraphView.js
+++ b/src/chart/graph/GraphView.js
@@ -62,7 +62,7 @@ function fadeOutItem(item, opacityPath, opacityRatio) {
function fadeInItem(item, opacityPath) {
var opacity = getItemOpacity(item, opacityPath);
var el = item.getGraphicEl();
- // Should go back to normal opacity first, consider hoverLayer,
+ // Should go back to normal opacity first, consider hoverLayer,
// where current state is copied to elMirror, and support
// emphasis opacity here.
el.traverse(function (child) {
@@ -221,17 +221,25 @@ export default echarts.extendChartView({
rad = rad - Math.PI;
}
var textPosition = isLeft ? 'left' : 'right';
- symbolPath.setStyle({
- textRotation: -rad,
- textPosition: textPosition,
- textOrigin: 'center'
- });
- symbolPath.hoverStyle && (symbolPath.hoverStyle.textPosition = textPosition);
+ graphic.modifyLabelStyle(
+ symbolPath,
+ {
+ textRotation: -rad,
+ textPosition: textPosition,
+ textOrigin: 'center'
+ },
+ {
+ textPosition: textPosition
+ }
+ );
}
else {
- symbolPath.setStyle({
- textRotation: labelRotate *= Math.PI / 180
- });
+ graphic.modifyLabelStyle(
+ symbolPath,
+ {
+ textRotation: labelRotate *= Math.PI / 180
+ }
+ );
}
});
diff --git a/src/util/graphic.js b/src/util/graphic.js
index b8c2373..8795440 100644
--- a/src/util/graphic.js
+++ b/src/util/graphic.js
@@ -658,6 +658,29 @@ export function setLabelStyle(
}
/**
+ * Modify label style manually.
+ * Only works after `setLabelStyle` and `setElementHoverStyle` called.
+ *
+ * @param {module:zrender/src/Element} el
+ * @param {Object} [normalStyleProps] optional
+ * @param {Object} [emphasisStyleProps] optional
+ */
+export function modifyLabelStyle(el, normalStyleProps, emphasisStyleProps) {
+ var elStyle = el.style;
+ if (normalStyleProps) {
+ rollbackDefaultTextStyle(elStyle);
+ el.setStyle(normalStyleProps);
+ applyDefaultTextStyle(elStyle);
+ }
+ elStyle = el.__hoverStl;
+ if (emphasisStyleProps && elStyle) {
+ rollbackDefaultTextStyle(elStyle);
+ zrUtil.extend(elStyle, emphasisStyleProps);
+ applyDefaultTextStyle(elStyle);
+ }
+}
+
+/**
* Set basic textStyle properties.
* See more info in `setTextStyleCommon`.
* @param {Object|module:zrender/graphic/Style} textStyle
@@ -842,10 +865,6 @@ function setTokenTextStyle(textStyle, textStyleModel, globalTextStyle, opt, isEm
globalTextStyle.textBorderWidth
);
- // Save original textPosition, because style.textPosition will be repalced by
- // real location (like [10, 30]) in zrender.
- textStyle.insideRawTextPosition = textStyle.textPosition;
-
if (!isEmphasis) {
if (isBlock) {
textStyle.insideRollbackOpt = opt;
@@ -936,7 +955,7 @@ function applyDefaultTextStyle(textStyle) {
}
var useInsideStyle = opt.useInsideStyle;
- var textPosition = textStyle.insideRawTextPosition;
+ var textPosition = textStyle.textPosition;
var insideRollback;
var autoColor = opt.autoColor;
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts] 02/02: Enhance circular layout: based on symbol
size and fix overlap when some value are very smaller than the max value.
Fix #10462, Close #10615
Posted by su...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 1f134a3de910532161640e1ef61f111b8830bcf3
Author: sushuang <su...@gmail.com>
AuthorDate: Mon Jun 17 15:36:29 2019 +0800
Enhance circular layout: based on symbol size and fix overlap when some value are very smaller than the max value. Fix #10462, Close #10615
---
src/chart/graph.js | 2 +-
src/chart/graph/GraphView.js | 27 +-
src/chart/graph/adjustEdge.js | 8 +-
src/chart/graph/circularLayout.js | 2 +-
src/chart/graph/circularLayoutHelper.js | 115 ++-
src/chart/graph/forceLayout.js | 2 +-
.../graph/{circularLayout.js => graphHelper.js} | 30 +-
src/echarts.js | 2 +
test/force.html | 2 +-
test/force3.html | 2 +-
test/graph-circular.html | 767 +++++++++++++++++++++
11 files changed, 898 insertions(+), 61 deletions(-)
diff --git a/src/chart/graph.js b/src/chart/graph.js
index 9e81fa4..6bcf09f 100644
--- a/src/chart/graph.js
+++ b/src/chart/graph.js
@@ -39,7 +39,7 @@ echarts.registerVisual(categoryVisual);
echarts.registerVisual(edgeVisual);
echarts.registerLayout(simpleLayout);
-echarts.registerLayout(circularLayout);
+echarts.registerLayout(echarts.PRIORITY.VISUAL.POST_CHART_LAYOUT, circularLayout);
echarts.registerLayout(forceLayout);
// Graph view coordinate system
diff --git a/src/chart/graph/GraphView.js b/src/chart/graph/GraphView.js
index e9f5529..6be1548 100644
--- a/src/chart/graph/GraphView.js
+++ b/src/chart/graph/GraphView.js
@@ -26,6 +26,7 @@ import * as roamHelper from '../../component/helper/roamHelper';
import {onIrrelevantElement} from '../../component/helper/cursorHelper';
import * as graphic from '../../util/graphic';
import adjustEdge from './adjustEdge';
+import {getNodeGlobalScale} from './graphHelper';
var FOCUS_ADJACENCY = '__focusNodeAdjacency';
var UNFOCUS_ADJACENCY = '__unfocusNodeAdjacency';
@@ -96,7 +97,6 @@ export default echarts.extendChartView({
var coordSys = seriesModel.coordinateSystem;
this._model = seriesModel;
- this._nodeScaleRatio = seriesModel.get('nodeScaleRatio');
var symbolDraw = this._symbolDraw;
var lineDraw = this._lineDraw;
@@ -116,7 +116,7 @@ export default echarts.extendChartView({
}
}
// Fix edge contact point with node
- adjustEdge(seriesModel.getGraph(), this._getNodeGlobalScale(seriesModel));
+ adjustEdge(seriesModel.getGraph(), getNodeGlobalScale(seriesModel));
var data = seriesModel.getData();
symbolDraw.updateData(data);
@@ -356,7 +356,7 @@ export default echarts.extendChartView({
originY: e.originY
});
this._updateNodeAndLinkScale();
- adjustEdge(seriesModel.getGraph(), this._getNodeGlobalScale(seriesModel));
+ adjustEdge(seriesModel.getGraph(), getNodeGlobalScale(seriesModel));
this._lineDraw.updateLayout();
}, this);
},
@@ -365,7 +365,7 @@ export default echarts.extendChartView({
var seriesModel = this._model;
var data = seriesModel.getData();
- var nodeScale = this._getNodeGlobalScale(seriesModel);
+ var nodeScale = getNodeGlobalScale(seriesModel);
var invScale = [nodeScale, nodeScale];
data.eachItemGraphicEl(function (el, idx) {
@@ -373,25 +373,8 @@ export default echarts.extendChartView({
});
},
- _getNodeGlobalScale: function (seriesModel) {
- var coordSys = seriesModel.coordinateSystem;
- if (coordSys.type !== 'view') {
- return 1;
- }
-
- var nodeScaleRatio = this._nodeScaleRatio;
-
- var groupScale = coordSys.scale;
- var groupZoom = (groupScale && groupScale[0]) || 1;
- // Scale node when zoom changes
- var roamZoom = coordSys.getZoom();
- var nodeScale = (roamZoom - 1) * nodeScaleRatio + 1;
-
- return nodeScale / groupZoom;
- },
-
updateLayout: function (seriesModel) {
- adjustEdge(seriesModel.getGraph(), this._getNodeGlobalScale(seriesModel));
+ adjustEdge(seriesModel.getGraph(), getNodeGlobalScale(seriesModel));
this._symbolDraw.updateLayout();
this._lineDraw.updateLayout();
diff --git a/src/chart/graph/adjustEdge.js b/src/chart/graph/adjustEdge.js
index d36a0a6..dc40767 100644
--- a/src/chart/graph/adjustEdge.js
+++ b/src/chart/graph/adjustEdge.js
@@ -19,6 +19,7 @@
import * as curveTool from 'zrender/src/core/curve';
import * as vec2 from 'zrender/src/core/vector';
+import {getSymbolSize} from './graphHelper';
var v1 = [];
var v2 = [];
@@ -97,13 +98,6 @@ export default function (graph, scale) {
var v = [];
scale /= 2;
- function getSymbolSize(node) {
- var symbolSize = node.getVisual('symbolSize');
- if (symbolSize instanceof Array) {
- symbolSize = (symbolSize[0] + symbolSize[1]) / 2;
- }
- return symbolSize;
- }
graph.eachEdge(function (edge, idx) {
var linePoints = edge.getLayout();
var fromSymbol = edge.getVisual('fromSymbol');
diff --git a/src/chart/graph/circularLayout.js b/src/chart/graph/circularLayout.js
index 1495f6f..9637fbf 100644
--- a/src/chart/graph/circularLayout.js
+++ b/src/chart/graph/circularLayout.js
@@ -22,7 +22,7 @@ import {circularLayout} from './circularLayoutHelper';
export default function (ecModel) {
ecModel.eachSeriesByType('graph', function (seriesModel) {
if (seriesModel.get('layout') === 'circular') {
- circularLayout(seriesModel);
+ circularLayout(seriesModel, 'symbolSize');
}
});
}
diff --git a/src/chart/graph/circularLayoutHelper.js b/src/chart/graph/circularLayoutHelper.js
index 2bf5d88..3552c62 100644
--- a/src/chart/graph/circularLayoutHelper.js
+++ b/src/chart/graph/circularLayoutHelper.js
@@ -18,8 +18,35 @@
*/
import * as vec2 from 'zrender/src/core/vector';
+import {getSymbolSize, getNodeGlobalScale} from './graphHelper';
-export function circularLayout(seriesModel) {
+var PI = Math.PI;
+
+var _symbolRadiansHalf = [];
+
+/**
+ * `basedOn` can be:
+ * 'value':
+ * This layout is not accurate and have same bad case. For example,
+ * if the min value is very smaller than the max value, the nodes
+ * with the min value probably overlap even though there is enough
+ * space to layout them. So we only use this approach in the as the
+ * init layout of the force layout.
+ * FIXME
+ * Probably we do not need this method any more but use
+ * `basedOn: 'symbolSize'` in force layout if
+ * delay its init operations to GraphView.
+ * 'symbolSize':
+ * This approach work only if all of the symbol size calculated.
+ * That is, the progressive rendering is not applied to graph.
+ * FIXME
+ * If progressive rendering is applied to graph some day,
+ * probably we have to use `basedOn: 'value'`.
+ *
+ * @param {module:echarts/src/model/Series} seriesModel
+ * @param {string} basedOn 'value' or 'symbolSize'
+ */
+export function circularLayout(seriesModel, basedOn) {
var coordSys = seriesModel.coordinateSystem;
if (coordSys && coordSys.type !== 'view') {
return;
@@ -30,33 +57,22 @@ export function circularLayout(seriesModel) {
var nodeData = seriesModel.getData();
var graph = nodeData.graph;
- var angle = 0;
- var sum = nodeData.getSum('value');
- var unitAngle = Math.PI * 2 / (sum || nodeData.count());
-
var cx = rect.width / 2 + rect.x;
var cy = rect.height / 2 + rect.y;
-
var r = Math.min(rect.width, rect.height) / 2;
-
- graph.eachNode(function (node) {
- var value = node.getValue('value');
-
- angle += unitAngle * (sum ? value : 1) / 2;
-
- node.setLayout([
- r * Math.cos(angle) + cx,
- r * Math.sin(angle) + cy
- ]);
-
- angle += unitAngle * (sum ? value : 1) / 2;
- });
+ var count = nodeData.count();
nodeData.setLayout({
cx: cx,
cy: cy
});
+ if (!count) {
+ return;
+ }
+
+ _layoutNodesBasedOn[basedOn](seriesModel, coordSys, graph, nodeData, r, cx, cy, count);
+
graph.eachEdge(function (edge) {
var curveness = edge.getModel().get('lineStyle.curveness') || 0;
var p1 = vec2.clone(edge.node1.getLayout());
@@ -73,4 +89,63 @@ export function circularLayout(seriesModel) {
}
edge.setLayout([p1, p2, cp1]);
});
-}
\ No newline at end of file
+}
+
+var _layoutNodesBasedOn = {
+
+ value: function (seriesModel, coordSys, graph, nodeData, r, cx, cy, count) {
+ var angle = 0;
+ var sum = nodeData.getSum('value');
+ var unitAngle = Math.PI * 2 / (sum || count);
+
+ graph.eachNode(function (node) {
+ var value = node.getValue('value');
+ var radianHalf = unitAngle * (sum ? value : 1) / 2;
+
+ angle += radianHalf;
+ node.setLayout([
+ r * Math.cos(angle) + cx,
+ r * Math.sin(angle) + cy
+ ]);
+ angle += radianHalf;
+ });
+ },
+
+ symbolSize: function (seriesModel, coordSys, graph, nodeData, r, cx, cy, count) {
+ var sumRadian = 0;
+ _symbolRadiansHalf.length = count;
+
+ var nodeScale = getNodeGlobalScale(seriesModel);
+
+ graph.eachNode(function (node) {
+ var symbolSize = getSymbolSize(node);
+
+ // Normally this case will not happen, but we still add
+ // some the defensive code (2px is an arbitrary value).
+ isNaN(symbolSize) && (symbolSize = 2);
+ symbolSize < 0 && (symbolSize = 0);
+
+ symbolSize *= nodeScale;
+
+ var symbolRadianHalf = Math.asin(symbolSize / 2 / r);
+ // when `symbolSize / 2` is bigger than `r`.
+ isNaN(symbolRadianHalf) && (symbolRadianHalf = PI / 2);
+ _symbolRadiansHalf[node.dataIndex] = symbolRadianHalf;
+ sumRadian += symbolRadianHalf * 2;
+ });
+
+ var halfRemainRadian = (2 * PI - sumRadian) / count / 2;
+
+ var angle = 0;
+ graph.eachNode(function (node) {
+ var radianHalf = halfRemainRadian + _symbolRadiansHalf[node.dataIndex];
+
+ angle += radianHalf;
+ node.setLayout([
+ r * Math.cos(angle) + cx,
+ r * Math.sin(angle) + cy
+ ]);
+ angle += radianHalf;
+ });
+ }
+};
diff --git a/src/chart/graph/forceLayout.js b/src/chart/graph/forceLayout.js
index 36291ba..af999bf 100644
--- a/src/chart/graph/forceLayout.js
+++ b/src/chart/graph/forceLayout.js
@@ -47,7 +47,7 @@ export default function (ecModel) {
simpleLayout(graphSeries);
}
else if (initLayout === 'circular') {
- circularLayout(graphSeries);
+ circularLayout(graphSeries, 'value');
}
var nodeDataExtent = nodeData.getDataExtent('value');
diff --git a/src/chart/graph/circularLayout.js b/src/chart/graph/graphHelper.js
similarity index 53%
copy from src/chart/graph/circularLayout.js
copy to src/chart/graph/graphHelper.js
index 1495f6f..fc87b9e 100644
--- a/src/chart/graph/circularLayout.js
+++ b/src/chart/graph/graphHelper.js
@@ -17,12 +17,28 @@
* under the License.
*/
-import {circularLayout} from './circularLayoutHelper';
+export function getNodeGlobalScale(seriesModel) {
+ var coordSys = seriesModel.coordinateSystem;
+ if (coordSys.type !== 'view') {
+ return 1;
+ }
-export default function (ecModel) {
- ecModel.eachSeriesByType('graph', function (seriesModel) {
- if (seriesModel.get('layout') === 'circular') {
- circularLayout(seriesModel);
- }
- });
+ var nodeScaleRatio = seriesModel.option.nodeScaleRatio;
+
+ var groupScale = coordSys.scale;
+ var groupZoom = (groupScale && groupScale[0]) || 1;
+ // Scale node when zoom changes
+ var roamZoom = coordSys.getZoom();
+ var nodeScale = (roamZoom - 1) * nodeScaleRatio + 1;
+
+ return nodeScale / groupZoom;
}
+
+export function getSymbolSize(node) {
+ var symbolSize = node.getVisual('symbolSize');
+ if (symbolSize instanceof Array) {
+ symbolSize = (symbolSize[0] + symbolSize[1]) / 2;
+ }
+ return +symbolSize;
+}
+
diff --git a/src/echarts.js b/src/echarts.js
index e6ab5f1..6edca4a 100644
--- a/src/echarts.js
+++ b/src/echarts.js
@@ -66,6 +66,7 @@ var PRIORITY_VISUAL_LAYOUT = 1000;
var PRIORITY_VISUAL_PROGRESSIVE_LAYOUT = 1100;
var PRIORITY_VISUAL_GLOBAL = 2000;
var PRIORITY_VISUAL_CHART = 3000;
+var PRIORITY_VISUAL_POST_CHART_LAYOUT = 3500;
var PRIORITY_VISUAL_COMPONENT = 4000;
// FIXME
// necessary?
@@ -81,6 +82,7 @@ export var PRIORITY = {
PROGRESSIVE_LAYOUT: PRIORITY_VISUAL_PROGRESSIVE_LAYOUT,
GLOBAL: PRIORITY_VISUAL_GLOBAL,
CHART: PRIORITY_VISUAL_CHART,
+ POST_CHART_LAYOUT: PRIORITY_VISUAL_POST_CHART_LAYOUT,
COMPONENT: PRIORITY_VISUAL_COMPONENT,
BRUSH: PRIORITY_VISUAL_BRUSH
}
diff --git a/test/force.html b/test/force.html
index e3fb5a1..e330971 100644
--- a/test/force.html
+++ b/test/force.html
@@ -96,7 +96,7 @@ under the License.
width: '25%',
height: '25%',
force: {
- // initLayout: 'circular'
+ // initLayout: 'circular',
// gravity: 0
repulsion: 100,
edgeLength: 5
diff --git a/test/force3.html b/test/force3.html
index ffcd4a2..e7ad1ae 100644
--- a/test/force3.html
+++ b/test/force3.html
@@ -70,7 +70,7 @@ under the License.
animation: false,
data: data,
force: {
- // initLayout: 'circular'
+ // initLayout: 'circular',
// gravity: 0
repulsion: 100,
edgeLength: 5
diff --git a/test/graph-circular.html b/test/graph-circular.html
new file mode 100644
index 0000000..e57b3a9
--- /dev/null
+++ b/test/graph-circular.html
@@ -0,0 +1,767 @@
+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <script src="lib/esl.js"></script>
+ <script src="lib/config.js"></script>
+ <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>
+ <style>
+ </style>
+
+
+ <div id="main0"></div>
+ <div id="main1"></div>
+ <div id="main2"></div>
+ <div id="main3"></div>
+ <div id="main4"></div>
+ <div id="main5"></div>
+ <div id="main6"></div>
+ <div id="main7"></div>
+
+
+
+
+
+
+ <script>
+
+ var option;
+
+ require([
+ 'echarts'/*, 'map/js/china' */
+ ], function (echarts) {
+
+ option = {
+ tooltip: {},
+ legend: {},
+ series: [{
+ type: 'graph',
+ name: 'Gene',
+ layout: 'circular',
+ circular: {
+ rotateLabel: true
+ },
+ roam: true,
+ focusNodeAdjacency: true,
+ label: {
+ show: true
+ },
+ lineStyle: {
+ color: 'source',
+ curveness: 0.3
+ },
+ emphasis: {
+ label: {
+ color: 'blue'
+ },
+ lineStyle: {
+ width: 10
+ }
+ },
+ data: [
+ {
+ itemStyle: null,
+ name: 'DRD2',
+ value: 40,
+ symbolSize: 40
+ },
+ {
+ itemStyle: null,
+ name: 'ADORA2A',
+ value: 0,
+ symbolSize: 20
+ },
+ {
+ itemStyle: null,
+ name: 'ARRB2',
+ value: 30,
+ symbolSize: 20,
+ },
+ {
+ itemStyle: null,
+ name: 'CALM1',
+ value: 20,
+ symbolSize: 40
+ },
+ {
+ itemStyle: null,
+ name: 'CALM2',
+ value: 0,
+ symbolSize: 20
+ },
+ {
+ itemStyle: null,
+ name: 'FLNA',
+ value: 0,
+ symbolSize: 20
+ },
+ {
+ itemStyle: null,
+ name: 'NSF',
+ value: 0,
+ symbolSize: 20
+ }
+ ],
+ links: [
+ {
+ source: 'DRD2',
+ target: 'ADORA2A'
+ },
+ {
+ source: 'DRD2',
+ target: 'ARRB2'
+ },
+ {
+ source: 'DRD2',
+ target: 'CALM1'
+ },
+ {
+ source: 'DRD2',
+ target: 'CALM2'
+ },
+ {
+ source: 'DRD2',
+ target: 'FLNA'
+ },
+ {
+ source: 'DRD2',
+ target: 'NSF'
+ },
+ {
+ source: 'CALM1',
+ target: 'ADORA2A'
+ },
+ {
+ source: 'CALM1',
+ target: 'ARRB2'
+ },
+ {
+ source: 'CALM1',
+ target: 'CALM2'
+ },
+ {
+ source: 'CALM1',
+ target: 'FLNA'
+ },
+ {
+ source: 'CALM1',
+ target: 'NSF'
+ },
+ ]
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main0', {
+ option: option,
+ title: 'has 0 value nodes'
+ // recordCanvas: true
+ });
+ });
+
+ </script>
+
+
+
+
+
+
+ <script>
+
+ var option;
+
+ require([
+ 'echarts'/*, 'map/js/china' */
+ ], function (echarts) {
+
+ option = {
+ tooltip: {},
+ legend: {},
+ series: [{
+ type: 'graph',
+ name: 'Gene',
+ layout: 'circular',
+ circular: {
+ rotateLabel: true
+ },
+ roam: true,
+ focusNodeAdjacency: true,
+ label: {
+ show: true
+ },
+ lineStyle: {
+ color: 'source',
+ curveness: 0.3
+ },
+ itemStyle: {
+ opacity: 0.8
+ },
+ emphasis: {
+ label: {
+ color: 'blue'
+ },
+ lineStyle: {
+ width: 10
+ }
+ },
+ left: 50,
+ width: 100,
+ top: 50,
+ height: 100,
+ roam: true,
+ data: [
+ {
+ name: 'DRD2',
+ value: 40,
+ symbolSize: 50 * Math.pow(2, 0.5)
+ },
+ {
+ name: 'ADORA2A',
+ value: 0,
+ symbolSize: 50 * Math.pow(2, 0.5)
+ },
+ {
+ name: 'ARRB2',
+ value: 30,
+ symbolSize: 50 * Math.pow(2, 0.5)
+ },
+ {
+ name: 'CALM1',
+ value: 20,
+ symbolSize: 50 * Math.pow(2, 0.5)
+ }
+ ],
+ links: [
+ {
+ source: 'DRD2',
+ target: 'ADORA2A'
+ },
+ {
+ source: 'DRD2',
+ target: 'ARRB2'
+ }
+ ]
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main1', {
+ option: option,
+ title: 'all the same'
+ // recordCanvas: true
+ });
+ });
+
+ </script>
+
+
+
+
+
+
+
+
+
+
+ <script>
+
+ var option;
+
+ require([
+ 'echarts'/*, 'map/js/china' */
+ ], function (echarts) {
+
+ option = {
+ tooltip: {},
+ legend: {},
+ series: [{
+ type: 'graph',
+ name: 'Gene',
+ layout: 'circular',
+ circular: {
+ rotateLabel: true
+ },
+ roam: true,
+ focusNodeAdjacency: true,
+ label: {
+ show: true
+ },
+ lineStyle: {
+ color: 'source',
+ curveness: 0.3
+ },
+ itemStyle: {
+ opacity: 0.8
+ },
+ emphasis: {
+ label: {
+ color: 'blue'
+ },
+ lineStyle: {
+ width: 10
+ }
+ },
+ left: 50,
+ width: 100,
+ top: 50,
+ height: 100,
+ data: [
+ {
+ name: 'DRD2',
+ value: 40,
+ symbolSize: 50 * Math.pow(2, 0.5)
+ },
+ {
+ name: 'ADORA2A',
+ value: 0,
+ symbolSize: 50 * Math.pow(2, 0.5)
+ },
+ {
+ name: 'ARRB2',
+ value: 30,
+ symbolSize: 50 * Math.pow(2, 0.5)
+ },
+ {
+ name: 'CALM1',
+ value: 20,
+ symbolSize: 100 * Math.pow(2, 0.5)
+ }
+ ],
+ links: [
+ {
+ source: 'DRD2',
+ target: 'ADORA2A'
+ },
+ {
+ source: 'DRD2',
+ target: 'ARRB2'
+ }
+ ]
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main2', {
+ option: option,
+ title: 'one symbol contains the center of the circular layout.'
+ // recordCanvas: true
+ });
+ });
+
+ </script>
+
+
+
+
+
+
+ <script>
+
+ var option;
+
+ require([
+ 'echarts'/*, 'map/js/china' */
+ ], function (echarts) {
+
+ option = {
+ tooltip: {},
+ legend: {},
+ series: [{
+ type: 'graph',
+ name: 'Gene',
+ layout: 'circular',
+ circular: {
+ rotateLabel: true
+ },
+ roam: true,
+ focusNodeAdjacency: true,
+ label: {
+ show: true
+ },
+ lineStyle: {
+ color: 'source',
+ curveness: 0.3
+ },
+ itemStyle: {
+ opacity: 0.8
+ },
+ emphasis: {
+ label: {
+ color: 'blue'
+ },
+ lineStyle: {
+ width: 10
+ }
+ },
+ left: 50,
+ width: 100,
+ top: 50,
+ height: 100,
+ data: [
+ {
+ name: 'DRD2',
+ value: 40,
+ symbolSize: 70 * Math.pow(2, 0.5)
+ },
+ {
+ name: 'ADORA2A',
+ value: 0,
+ symbolSize: 70 * Math.pow(2, 0.5)
+ },
+ {
+ name: 'ARRB2',
+ value: 30,
+ symbolSize: 70 * Math.pow(2, 0.5)
+ },
+ {
+ name: 'CALM1',
+ value: 20,
+ symbolSize: 70 * Math.pow(2, 0.5)
+ }
+ ],
+ links: [
+ {
+ source: 'DRD2',
+ target: 'ADORA2A'
+ },
+ {
+ source: 'DRD2',
+ target: 'ARRB2'
+ }
+ ]
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main3', {
+ option: option,
+ title: 'overlapped'
+ // recordCanvas: true
+ });
+ });
+
+ </script>
+
+
+
+
+
+
+
+
+ <script>
+
+ var option;
+
+ require([
+ 'echarts'/*, 'map/js/china' */
+ ], function (echarts) {
+
+ option = {
+ tooltip: {},
+ legend: {},
+ series: [{
+ type: 'graph',
+ name: 'Gene',
+ layout: 'circular',
+ circular: {
+ rotateLabel: true
+ },
+ roam: true,
+ focusNodeAdjacency: true,
+ label: {
+ show: true
+ },
+ lineStyle: {
+ color: 'source',
+ curveness: 0.3
+ },
+ itemStyle: {
+ opacity: 0.8
+ },
+ emphasis: {
+ label: {
+ color: 'blue'
+ },
+ lineStyle: {
+ width: 10
+ }
+ },
+ left: 50,
+ width: 100,
+ top: 50,
+ height: 100,
+ data: [
+ {
+ name: 'DRD2',
+ value: 40,
+ symbolSize: 30 * Math.pow(2, 0.5)
+ }
+ ],
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main4', {
+ option: option,
+ title: 'one node'
+ // recordCanvas: true
+ });
+ });
+
+ </script>
+
+
+
+
+
+
+
+
+
+ <script>
+
+ var option;
+
+ require([
+ 'echarts'/*, 'map/js/china' */
+ ], function (echarts) {
+
+ option = {
+ tooltip: {},
+ legend: {},
+ series: [{
+ type: 'graph',
+ name: 'Gene',
+ layout: 'circular',
+ circular: {
+ rotateLabel: true
+ },
+ roam: true,
+ focusNodeAdjacency: true,
+ label: {
+ show: true
+ },
+ lineStyle: {
+ color: 'source',
+ curveness: 0.3
+ },
+ itemStyle: {
+ opacity: 0.8
+ },
+ emphasis: {
+ label: {
+ color: 'blue'
+ },
+ lineStyle: {
+ width: 10
+ }
+ },
+ left: 50,
+ width: 100,
+ top: 50,
+ height: 100,
+ data: [
+ {
+ name: 'DRD2',
+ value: 40,
+ symbolSize: 30 * Math.pow(2, 0.5)
+ },
+ {
+ name: 'ADORA2A',
+ value: 0,
+ symbolSize: 70 * Math.pow(2, 0.5)
+ }
+ ],
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main5', {
+ option: option,
+ title: 'two nodes'
+ // recordCanvas: true
+ });
+ });
+
+ </script>
+
+
+
+
+
+
+
+ <script>
+
+ var option;
+
+ require([
+ 'echarts'/*, 'map/js/china' */
+ ], function (echarts) {
+
+ option = {
+ tooltip: {},
+ legend: {},
+ series: [{
+ type: 'graph',
+ name: 'Gene',
+ layout: 'circular',
+ circular: {
+ rotateLabel: true
+ },
+ roam: true,
+ focusNodeAdjacency: true,
+ label: {
+ show: true
+ },
+ lineStyle: {
+ color: 'source',
+ curveness: 0.3
+ },
+ itemStyle: {
+ opacity: 0.8
+ },
+ emphasis: {
+ label: {
+ color: 'blue'
+ },
+ lineStyle: {
+ width: 10
+ }
+ },
+ left: 50,
+ width: 100,
+ top: 50,
+ height: 100,
+ data: [
+ {
+ name: 'DRD2',
+ value: 40,
+ symbolSize: 70 * Math.pow(2, 0.5)
+ },
+ {
+ name: 'ADORA2A',
+ value: 0,
+ symbolSize: 10 * Math.pow(2, 0.5)
+ },
+ {
+ name: 'ARRB2',
+ value: 30,
+ symbolSize: 10 * Math.pow(2, 0.5)
+ }
+ ],
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main6', {
+ option: option,
+ title: 'three nodes'
+ // recordCanvas: true
+ });
+ });
+
+ </script>
+
+
+
+
+
+
+
+
+ <script>
+
+ var option;
+
+ require([
+ 'echarts'/*, 'map/js/china' */
+ ], function (echarts) {
+
+ var nodes = [];
+ for (var i = 0; i < 50; i++) {
+ nodes.push({
+ name: 'node_' + i,
+ value: 40,
+ symbolSize: 7 + (i > 7 && i < 15 ? 40 : 0)
+ });
+ }
+
+ option = {
+ tooltip: {},
+ series: [{
+ type: 'graph',
+ name: 'Gene',
+ layout: 'circular',
+ circular: {
+ rotateLabel: true
+ },
+ roam: true,
+ focusNodeAdjacency: true,
+ zoom: 0.5,
+ label: {
+ show: true
+ },
+ lineStyle: {
+ color: 'source',
+ curveness: 0.3
+ },
+ itemStyle: {
+ opacity: 0.8
+ },
+ emphasis: {
+ label: {
+ color: 'blue'
+ },
+ lineStyle: {
+ width: 10
+ }
+ },
+ roam: true,
+ data: nodes
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main7', {
+ option: option,
+ height: 400,
+ title: [
+ 'scaled (symbol should not be overlapped)',
+ 'also check circular layout in **test/graph.html**',
+ 'where also has symbols scaled.'
+ ]
+ });
+ });
+
+ </script>
+
+
+
+
+
+
+
+
+ </body>
+</html>
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org