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/07/02 10:29:35 UTC
[incubator-echarts] branch label-enhancement updated: feat(label):
can change labelLine points 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 b26b5d5 feat(label): can change labelLine points in labelLayout
b26b5d5 is described below
commit b26b5d52814dfce3e42006a66aeecca1025e52e7
Author: pissang <bm...@gmail.com>
AuthorDate: Thu Jul 2 18:26:22 2020 +0800
feat(label): can change labelLine points in labelLayout
---
src/label/LabelManager.ts | 44 +++++++++----
src/util/types.ts | 5 ++
test/pie-label-mobile.html | 156 +++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 194 insertions(+), 11 deletions(-)
diff --git a/src/label/LabelManager.ts b/src/label/LabelManager.ts
index 3a84d2f..90ff6ad 100644
--- a/src/label/LabelManager.ts
+++ b/src/label/LabelManager.ts
@@ -45,7 +45,7 @@ import Transformable from 'zrender/src/core/Transformable';
import { updateLabelLinePoints, setLabelLineStyle } from './labelGuideHelper';
import SeriesModel from '../model/Series';
import { makeInner } from '../util/model';
-import { retrieve2, each, keys, isFunction, filter, indexOf } from 'zrender/src/core/util';
+import { retrieve2, each, keys, isFunction, filter, indexOf, map, guid } from 'zrender/src/core/util';
import { PathStyleProps } from 'zrender/src/graphic/Path';
import Model from '../model/Model';
import { prepareLayoutList, hideOverlap, shiftLayoutOnX, shiftLayoutOnY } from './labelLayoutHelper';
@@ -92,9 +92,20 @@ interface SavedLabelAttr {
rect: RectLike
}
-function prepareLayoutCallbackParams(labelItem: LabelDesc): LabelLayoutOptionCallbackParams {
+function cloneArr(points: number[][]) {
+ if (points) {
+ const newPoints = [];
+ for (let i = 0; i < points.length; i++) {
+ newPoints.push(points[i].slice());
+ }
+ return newPoints;
+ }
+}
+
+function prepareLayoutCallbackParams(labelItem: LabelDesc, hostEl?: Element): LabelLayoutOptionCallbackParams {
const labelAttr = labelItem.defaultAttr;
const label = labelItem.label;
+ const labelLine = hostEl && hostEl.getTextGuideLine();
return {
dataIndex: labelItem.dataIndex,
dataType: labelItem.dataType,
@@ -105,7 +116,8 @@ function prepareLayoutCallbackParams(labelItem: LabelDesc): LabelLayoutOptionCal
// x: labelAttr.x,
// y: labelAttr.y,
align: label.style.align,
- verticalAlign: label.style.verticalAlign
+ verticalAlign: label.style.verticalAlign,
+ labelLinePoints: cloneArr(labelLine && labelLine.shape.points)
};
}
@@ -130,7 +142,7 @@ const labelLayoutInnerStore = makeInner<{
rotation?: number
},
- changedByUser?: boolean
+ needsUpdateLabelLine?: boolean
}, ZRText>();
const labelLineAnimationStore = makeInner<{
@@ -299,7 +311,7 @@ class LabelManager {
// TODO A global layout option?
if (typeof labelItem.layoutOption === 'function') {
layoutOption = labelItem.layoutOption(
- prepareLayoutCallbackParams(labelItem)
+ prepareLayoutCallbackParams(labelItem, hostEl)
);
}
else {
@@ -323,12 +335,12 @@ class LabelManager {
offset: [layoutOption.dx || 0, layoutOption.dy || 0]
});
}
- let changedByUser = false;
+ let needsUpdateLabelLine = false;
if (layoutOption.x != null) {
// TODO width of chart view.
label.x = parsePercent(layoutOption.x, width);
label.setStyle('x', 0); // Ignore movement in style. TODO: origin.
- changedByUser = changedByUser || true;
+ needsUpdateLabelLine = true;
}
else {
label.x = defaultLabelAttr.x;
@@ -339,16 +351,25 @@ class LabelManager {
// TODO height of chart view.
label.y = parsePercent(layoutOption.y, height);
label.setStyle('y', 0); // Ignore movement in style.
- changedByUser = changedByUser || true;
+ needsUpdateLabelLine = true;
}
else {
label.y = defaultLabelAttr.y;
label.setStyle('y', defaultLabelAttr.style.y);
}
- if (changedByUser) {
- labelLayoutInnerStore(label).changedByUser = true;
+
+ if (layoutOption.labelLinePoints) {
+ const guideLine = hostEl.getTextGuideLine();
+ if (guideLine) {
+ guideLine.setShape({ points: layoutOption.labelLinePoints });
+ // Not update
+ needsUpdateLabelLine = false;
+ }
}
+ const labelLayoutStore = labelLayoutInnerStore(label);
+ labelLayoutStore.needsUpdateLabelLine = needsUpdateLabelLine;
+
label.rotation = layoutOption.rotate != null
? layoutOption.rotate * degreeToRadian : defaultLabelAttr.rotation;
@@ -357,6 +378,7 @@ class LabelManager {
label.setStyle(key, layoutOption[key] != null ? layoutOption[key] : defaultLabelAttr.style[key]);
}
+
if (layoutOption.draggable) {
label.draggable = true;
label.cursor = 'move';
@@ -413,7 +435,7 @@ class LabelManager {
let needsUpdateLabelLine = !ignoreLabelLineUpdate;
const label = child.getTextContent();
if (!needsUpdateLabelLine && label) {
- needsUpdateLabelLine = labelLayoutInnerStore(label).changedByUser;
+ needsUpdateLabelLine = labelLayoutInnerStore(label).needsUpdateLabelLine;
}
if (needsUpdateLabelLine) {
this._updateLabelLine(child, seriesModel);
diff --git a/src/util/types.ts b/src/util/types.ts
index a739352..d6f3b79 100644
--- a/src/util/types.ts
+++ b/src/util/types.ts
@@ -828,6 +828,8 @@ export interface LabelLayoutOptionCallbackParams {
verticalAlign: ZRTextVerticalAlign
rect: RectLike
labelRect: RectLike
+ // Points of label line in pie/funnel
+ labelLinePoints?: number[][]
// x: number
// y: number
};
@@ -877,6 +879,9 @@ export interface LabelLayoutOption {
verticalAlign?: ZRTextVerticalAlign
width?: number
height?: number
+
+ // Points of label line in pie/funnel
+ labelLinePoints?: number[][]
}
export type LabelLayoutOptionCallback = (params: LabelLayoutOptionCallbackParams) => LabelLayoutOption;
diff --git a/test/pie-label-mobile.html b/test/pie-label-mobile.html
new file mode 100644
index 0000000..205bf53
--- /dev/null
+++ b/test/pie-label-mobile.html
@@ -0,0 +1,156 @@
+<!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>
+ <link rel="stylesheet" href="lib/reset.css" />
+ </head>
+ <body>
+ <style>
+ body {
+ background-color: #eee;
+ text-align: center;
+ padding-top: 20px;
+ }
+ .chart {
+ border-radius: 5px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+ margin: 20px auto;
+ width: 360px;
+ height: 200px;
+ background-color: #fff;
+ text-align: left;
+ }
+ </style>
+
+
+
+ <div id="main0"></div>
+
+
+
+
+
+
+
+
+
+ <script>
+ require(['echarts'], function (echarts) {
+ const datas = [
+ ////////////////////////////////////////
+ [
+ { name: '圣彼得堡来客', value: 5.6 },
+ { name: '陀思妥耶夫斯基全集', value: 1 },
+ { name: '史记精注全译（全6册）', value: 0.8 },
+ { name: '加德纳艺术通史', value: 0.5 },
+ { name: '表象与本质', value: 0.5 },
+ { name: '其它', value: 3.8 }
+ ],
+
+ ////////////////////////////////////////
+ [
+ { name: '银河帝国5：迈向基地', value: 3.8 },
+ { name: '俞军产品方法论', value: 2.3 },
+ { name: '艺术的逃难', value: 2.2 },
+ { name: '第一次世界大战回忆录（全五卷）', value: 1.3 },
+ { name: 'Scrum 精髓', value: 1.2 },
+ { name: '其它', value: 5.7 }
+ ],
+
+ ////////////////////////////////////////
+ [
+ { name: '克莱因壶', value: 3.5 },
+ { name: '投资最重要的事', value: 2.8 },
+ { name: '简读中国史', value: 1.7 },
+ { name: '你当像鸟飞往你的山', value: 1.4 },
+ { name: '表象与本质', value: 0.5 },
+ { name: '其它', value: 3.8 }
+ ]
+ ];
+
+ datas.forEach(function (data) {
+ const dom = document.createElement('div');
+ dom.classList.add('chart');
+ document.querySelector('#main0').appendChild(dom);
+
+ const chart = echarts.init(dom);
+ chart.setOption({
+ // color: ['#1B2550', '#2A3566', '#2B3C87', '#4853A7', '#858ED8', '#858ED8', '#A3ABEE'],
+ title: {
+ text: '阅读书籍分布',
+ left: 'center',
+ textStyle: {
+ color: '#999',
+ fontWeight: 'normal',
+ fontSize: 14
+ }
+ },
+ series: [{
+ type: 'pie',
+ radius: [20, 60],
+ label: {
+ alignTo: 'edge',
+ formatter: '{name|{b}}\n{time|{c}小时}',
+ margin: 10,
+ lineHeight: 15,
+ rich: {
+ time: {
+ fontSize: 10,
+ color: '#999'
+ }
+ }
+ },
+ labelLine: {
+ length: 5
+ },
+ labelLayout: function (params) {
+ const isLeft = params.labelRect.x < chart.getWidth() / 2;
+ const points = params.labelLinePoints;
+ // Update the end point.
+ if (isLeft) {
+ points[2][0] = params.labelRect.x;
+ }
+ else {
+ points[2][0] = params.labelRect.x + params.labelRect.width;
+ }
+ return {
+ labelLinePoints: points
+ }
+ },
+ data: data
+ }]
+ });
+ });
+ });
+ </script>
+
+
+ </body>
+</html>
+
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org