You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2020/06/03 13:44:25 UTC
[incubator-echarts] branch label-enhancement updated: feat: add
draggable in labelLayout
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch label-enhancement
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/label-enhancement by this push:
new c344d13 feat: add draggable in labelLayout
c344d13 is described below
commit c344d13b654bde4281a5642bcbdcbd61f6bbd62f
Author: pissang <bm...@gmail.com>
AuthorDate: Wed Jun 3 21:44:07 2020 +0800
feat: add draggable in labelLayout
---
src/label/LabelManager.ts | 43 +++++++++++++++++++++++++++++-------
src/util/types.ts | 6 +++++
test/labelLine.html | 10 +++++----
test/pie-label.html | 56 +++++++++++++++++++++++++++++++++++++++++++++++
4 files changed, 103 insertions(+), 12 deletions(-)
diff --git a/src/label/LabelManager.ts b/src/label/LabelManager.ts
index bb3246f..523c48c 100644
--- a/src/label/LabelManager.ts
+++ b/src/label/LabelManager.ts
@@ -49,6 +49,7 @@ import SeriesModel from '../model/Series';
import { makeInner } from '../util/model';
import { retrieve2, each, keys } from 'zrender/src/core/util';
import { PathStyleProps } from 'zrender/src/graphic/Path';
+import Model from '../model/Model';
interface DisplayedLabelItem {
label: ZRText
@@ -65,6 +66,7 @@ interface LabelLayoutDesc {
seriesModel: SeriesModel
dataIndex: number
+ dataType: string
layoutOption: LabelLayoutOptionCallback | LabelLayoutOption
@@ -107,6 +109,7 @@ function prepareLayoutCallbackParams(labelItem: LabelLayoutDesc): LabelLayoutOpt
const label = labelItem.label;
return {
dataIndex: labelItem.dataIndex,
+ dataType: labelItem.dataType,
seriesIndex: labelItem.seriesModel.seriesIndex,
text: labelItem.label.style.text,
rect: labelItem.hostRect,
@@ -136,6 +139,11 @@ const labelLineAnimationStore = makeInner<{
}
}, Polyline>();
+type LabelLineOptionMixin = {
+ labelLine: LabelLineOption,
+ emphasis: { labelLine: LabelLineOption }
+};
+
class LabelManager {
private _labelList: LabelLayoutDesc[] = [];
@@ -153,6 +161,7 @@ class LabelManager {
*/
private _addLabel(
dataIndex: number,
+ dataType: string,
seriesModel: SeriesModel,
label: ZRText,
layoutOption: LabelLayoutDesc['layoutOption']
@@ -192,6 +201,7 @@ class LabelManager {
seriesModel,
dataIndex,
+ dataType,
layoutOption,
@@ -253,10 +263,11 @@ class LabelManager {
// Only support label being hosted on graphic elements.
const textEl = child.getTextContent();
- const dataIndex = getECData(child).dataIndex;
+ const ecData = getECData(child);
+ const dataIndex = ecData.dataIndex;
// Can only attach the text on the element with dataIndex
if (textEl && dataIndex != null) {
- this._addLabel(dataIndex, seriesModel, textEl, layoutOption);
+ this._addLabel(dataIndex, ecData.dataType, seriesModel, textEl, layoutOption);
}
});
}
@@ -264,6 +275,12 @@ class LabelManager {
updateLayoutConfig(api: ExtensionAPI) {
const width = api.getWidth();
const height = api.getHeight();
+
+ function createDragHandler(el: Element, labelLineModel: Model) {
+ return function () {
+ updateLabelLinePoints(el, labelLineModel);
+ };
+ }
for (let i = 0; i < this._labelList.length; i++) {
const labelItem = this._labelList[i];
const label = labelItem.label;
@@ -324,6 +341,21 @@ class LabelManager {
labelItem.overlap = layoutOption.overlap;
labelItem.overlapMargin = layoutOption.overlapMargin;
+
+ if (layoutOption.draggable) {
+ label.draggable = true;
+ label.cursor = 'move';
+ if (hostEl) {
+ const data = labelItem.seriesModel.getData(labelItem.dataType);
+ const itemModel = data.getItemModel<LabelLineOptionMixin>(labelItem.dataIndex);
+ label.on('drag', createDragHandler(hostEl, itemModel.getModel('labelLine')));
+ }
+ }
+ else {
+ // TODO Other drag functions?
+ label.off('drag');
+ label.cursor = 'default';
+ }
}
}
@@ -406,7 +438,6 @@ class LabelManager {
transform
});
}
-
}
}
@@ -444,10 +475,7 @@ class LabelManager {
if (textEl && dataIndex != null) {
const data = seriesModel.getData(ecData.dataType);
- const itemModel = data.getItemModel<{
- labelLine: LabelLineOption,
- emphasis: { labelLine: LabelLineOption }
- }>(dataIndex);
+ const itemModel = data.getItemModel<LabelLineOptionMixin>(dataIndex);
const defaultStyle: PathStyleProps = {};
const visualStyle = data.getItemVisual(dataIndex, 'style');
@@ -462,7 +490,6 @@ class LabelManager {
emphasis: itemModel.getModel(['emphasis', 'labelLine'])
}, defaultStyle);
-
updateLabelLinePoints(el, labelLineModel);
}
}
diff --git a/src/util/types.ts b/src/util/types.ts
index 994aab8..617fb94 100644
--- a/src/util/types.ts
+++ b/src/util/types.ts
@@ -811,6 +811,7 @@ export interface LabelLineOption {
export interface LabelLayoutOptionCallbackParams {
dataIndex: number,
+ dataType: string,
seriesIndex: number,
text: string
align: ZRTextAlign
@@ -831,6 +832,11 @@ export interface LabelLayoutOption {
* Minimal margin between two labels which will be considered as overlapped.
*/
overlapMargin?: number
+
+ /**
+ * If label is draggable.
+ */
+ draggable?: boolean
/**
* Can be absolute px number or percent string.
*/
diff --git a/test/labelLine.html b/test/labelLine.html
index 38297a6..6cdae40 100644
--- a/test/labelLine.html
+++ b/test/labelLine.html
@@ -67,11 +67,13 @@ under the License.
},
labelLayout: {
y: 20,
+ draggable: true,
align: 'center',
overlap: 'hidden'
},
labelLine: {
- show: true
+ show: true,
+ length2: 10
},
label: {
show: true,
@@ -89,11 +91,13 @@ under the License.
},
labelLayout: {
y: 40,
+ draggable: true,
align: 'center',
overlap: 'hidden'
},
labelLine: {
- show: true
+ show: true,
+ length2: 10
},
label: {
show: true,
@@ -107,8 +111,6 @@ under the License.
var chart = testHelper.create(echarts, 'main0', {
title: [
- 'Test Case Description of main0',
- '(Muliple lines and **emphasis** are supported in description)'
],
option: option
// height: 300,
diff --git a/test/pie-label.html b/test/pie-label.html
index 6e0025b..ec6a077 100644
--- a/test/pie-label.html
+++ b/test/pie-label.html
@@ -47,6 +47,7 @@ under the License.
<div id="main4"></div>
<div id="main5"></div>
<div id="main6"></div>
+ <div id="main7"></div>
<script>
@@ -645,5 +646,60 @@ under the License.
</script>
+ <script>
+ require([
+ 'echarts'/*, 'map/js/china' */
+ ], function (echarts) {
+ const option = {
+ backgroundColor: '#2c343c',
+ visualMap: {
+ show: false,
+ min: 80,
+ max: 600,
+ inRange: {
+ colorLightness: [0, 1]
+ }
+ },
+ series : [
+ {
+ name: '访问来源',
+ type: 'pie',
+ radius: '55%',
+ data:[
+ {value:235, name:'视频广告'},
+ {value:274, name:'联盟广告'},
+ {value:310, name:'邮件营销'},
+ {value:335, name:'直接访问'},
+ {value:400, name:'搜索引擎'}
+ ],
+ roseType: 'angle',
+ label: {
+ textStyle: {
+ color: 'rgba(255, 255, 255, 0.3)'
+ }
+ },
+ labelLine: {
+ smooth: true,
+ minTurnAngle: 120,
+ lineStyle: {
+ color: 'rgba(255, 255, 255, 0.3)'
+ }
+ },
+ itemStyle: {
+ color: '#c23531',
+ shadowBlur: 200,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ }
+ }
+ ]
+ };
+ var chart = testHelper.create(echarts, 'main7', {
+ title: 'Case from https://echarts.apache.org/examples/zh/editor.html?c=doc-example/tutorial-styling-step5',
+ height: 300,
+ option: option
+ });
+ });
+
+ </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