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 2018/12/29 21:02:22 UTC
[incubator-echarts] branch master updated: Fix #9657 (label is not
always at center when pie label position 'center')
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
The following commit(s) were added to refs/heads/master by this push:
new 73af4bf Fix #9657 (label is not always at center when pie label position 'center')
73af4bf is described below
commit 73af4bf764d284de9c2b5d1eb53df6d2cf1da10c
Author: sushuang <su...@gmail.com>
AuthorDate: Sun Dec 30 05:00:47 2018 +0800
Fix #9657 (label is not always at center when pie label position 'center')
---
src/chart/pie/labelLayout.js | 33 ++++++----
test/pie-label.html | 148 +++++++++++++++++++++++++++++++++++++++++++
test/tmp-base.html | 4 +-
3 files changed, 168 insertions(+), 17 deletions(-)
diff --git a/src/chart/pie/labelLayout.js b/src/chart/pie/labelLayout.js
index e0b69b8..3244673 100644
--- a/src/chart/pie/labelLayout.js
+++ b/src/chart/pie/labelLayout.js
@@ -26,7 +26,6 @@ function adjustSingleSide(list, cx, cy, r, dir, viewWidth, viewHeight) {
return a.y - b.y;
});
- // 压
function shiftDown(start, end, delta, dir) {
for (var j = start; j < end; j++) {
list[j].y += delta;
@@ -42,7 +41,6 @@ function adjustSingleSide(list, cx, cy, r, dir, viewWidth, viewHeight) {
shiftUp(end - 1, delta / 2);
}
- // 弹
function shiftUp(end, delta) {
for (var j = end; j >= 0; j--) {
list[j].y -= delta;
@@ -56,18 +54,14 @@ function adjustSingleSide(list, cx, cy, r, dir, viewWidth, viewHeight) {
function changeX(list, isDownList, cx, cy, r, dir) {
var lastDeltaX = dir > 0
- ? isDownList // 右侧
- ? Number.MAX_VALUE // 下
- : 0 // 上
- : isDownList // 左侧
- ? Number.MAX_VALUE // 下
- : 0; // 上
+ ? isDownList // right-side
+ ? Number.MAX_VALUE // down
+ : 0 // up
+ : isDownList // left-side
+ ? Number.MAX_VALUE // down
+ : 0; // up
for (var i = 0, l = list.length; i < l; i++) {
- // Not change x for center label
- if (list[i].position === 'center') {
- continue;
- }
var deltaY = Math.abs(list[i].y - cy);
var length = list[i].len;
var length2 = list[i].len2;
@@ -78,11 +72,11 @@ function adjustSingleSide(list, cx, cy, r, dir, viewWidth, viewHeight) {
)
: Math.abs(list[i].x - cx);
if (isDownList && deltaX >= lastDeltaX) {
- // 右下，左下
+ // right-down, left-down
deltaX = lastDeltaX - 10;
}
if (!isDownList && deltaX <= lastDeltaX) {
- // 右上，左上
+ // right-up, left-up
deltaX = lastDeltaX + 10;
}
@@ -122,6 +116,9 @@ function avoidOverlap(labelLayoutList, cx, cy, r, viewWidth, viewHeight) {
var leftList = [];
var rightList = [];
for (var i = 0; i < labelLayoutList.length; i++) {
+ if (isPositionCenter(labelLayoutList[i])) {
+ continue;
+ }
if (labelLayoutList[i].x < cx) {
leftList.push(labelLayoutList[i]);
}
@@ -134,6 +131,9 @@ function avoidOverlap(labelLayoutList, cx, cy, r, viewWidth, viewHeight) {
adjustSingleSide(leftList, cx, cy, r, -1, viewWidth, viewHeight);
for (var i = 0; i < labelLayoutList.length; i++) {
+ if (isPositionCenter(labelLayoutList[i])) {
+ continue;
+ }
var linePoints = labelLayoutList[i].linePoints;
if (linePoints) {
var dist = linePoints[1][0] - linePoints[2][0];
@@ -149,6 +149,11 @@ function avoidOverlap(labelLayoutList, cx, cy, r, viewWidth, viewHeight) {
}
}
+function isPositionCenter(layout) {
+ // Not change x for center label
+ return layout.position === 'center';
+}
+
export default function (seriesModel, r, viewWidth, viewHeight) {
var data = seriesModel.getData();
var labelLayoutList = [];
diff --git a/test/pie-label.html b/test/pie-label.html
new file mode 100644
index 0000000..332b53e
--- /dev/null
+++ b/test/pie-label.html
@@ -0,0 +1,148 @@
+<!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>
+ .test-title {
+ background: #146402;
+ color: #fff;
+ }
+ </style>
+
+
+ <div id="main0"></div>
+ <div id="main1"></div>
+
+
+ <script>
+
+ require([
+ 'echarts'/*, 'map/js/china' */
+ ], function (echarts) {
+
+ var value2 = 400;
+ var total = 1000;
+
+ function getData() {
+ return [{
+ name: '',
+ value: total - value2,
+ itemStyle: { color: 'rgb(8,90,150)' },
+ label: { show: false }
+ }, {
+ name: '50%',
+ value: value2,
+ itemStyle: { color: 'rgb(23,235,255)'},
+ label: { position: 'center', color: '#999', fontSize: '100' }
+ }]
+ }
+
+ var option = {
+ animation: false,
+ series: [{
+ type: 'pie',
+ radius: ['60%','80%'],
+ labelLine: { show: false },
+ hoverAnimation: false,
+ data: getData()
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main0', {
+ title: 'Label should be always at center of the pie',
+ option: option,
+ info: {
+ data: [{
+ label: {position: 'center'}
+ }]
+ }
+ });
+
+ setInterval(function () {
+ value2 += 3;
+ if (value2 > total) {
+ value2 = 0;
+ }
+ chart.setOption({
+ series: [{
+ data: getData()
+ }]
+ });
+ }, 20);
+ });
+
+ </script>
+
+
+
+ <script>
+
+ require([
+ 'echarts'/*, 'map/js/china' */
+ ], function (echarts) {
+
+ var count = 60;
+ var data = [];
+ for (var i = 0; i < count; i++) {
+ var label = i === 30
+ ? {
+ position: 'center',
+ fontSize: 30,
+ color: '#fff'
+ }
+ : null;
+ data.push({
+ name: i + 'A',
+ value: Math.random(),
+ label: label
+ });
+ }
+
+ var option = {
+ series: [{
+ type: 'pie',
+ radius: '50%',
+ data: data
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main1', {
+ title: 'Too many',
+ option: option
+ });
+ });
+
+ </script>
+
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/test/tmp-base.html b/test/tmp-base.html
index 3f3693c..fb3a3ba 100644
--- a/test/tmp-base.html
+++ b/test/tmp-base.html
@@ -44,8 +44,6 @@ under the License.
<script>
- var chart;
- var myChart;
var option;
require([
@@ -55,7 +53,7 @@ under the License.
// $.getJSON('./data/nutrients.json', function (data) {
// });
- chart = myChart = testHelper.create(echarts, 'main0', {
+ var chart = testHelper.create(echarts, 'main0', {
option: option
});
});
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org