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/10/13 10:02:42 UTC
[incubator-echarts] branch next updated: fix(pie): fix incorrect
label layout in some cases of gallery
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/next by this push:
new 6b10989 fix(pie): fix incorrect label layout in some cases of gallery
6b10989 is described below
commit 6b109894fad4efcccaff24eaa7596840f4cd26fa
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Oct 13 18:02:11 2020 +0800
fix(pie): fix incorrect label layout in some cases of gallery
---
src/chart/pie/PieView.ts | 19 +--
src/chart/pie/labelLayout.ts | 2 -
src/label/labelStyle.ts | 2 +-
test/pie-richText.html | 377 +++++++++++++++++++++++++++++++++++++++++++
4 files changed, 384 insertions(+), 16 deletions(-)
diff --git a/src/chart/pie/PieView.ts b/src/chart/pie/PieView.ts
index 600361c..e1af265 100644
--- a/src/chart/pie/PieView.ts
+++ b/src/chart/pie/PieView.ts
@@ -19,7 +19,7 @@
*/
-import { extend } from 'zrender/src/core/util';
+import { extend, retrieve2 } from 'zrender/src/core/util';
import * as graphic from '../../util/graphic';
import { setStatesStylesFromModel, enableHoverEmphasis } from '../../util/states';
import ChartView from '../../view/Chart';
@@ -151,17 +151,13 @@ class PiePiece extends graphic.Sector {
private _updateLabel(seriesModel: PieSeriesModel, data: List, idx: number): void {
const sector = this;
- const labelText = sector.getTextContent();
-
const itemModel = data.getItemModel<PieDataItemOption>(idx);
-
- const labelTextEmphasisState = labelText.ensureState('emphasis');
-
const labelModel = itemModel.getModel('label');
- const labelHoverModel = itemModel.getModel(['emphasis', 'label']);
+ const labelLineModel = itemModel.getModel('labelLine');
const style = data.getItemVisual(idx, 'style');
const visualColor = style && style.fill as ColorString;
+ const visualOpacity = style && style.opacity;
setLabelStyle(
sector,
@@ -174,9 +170,10 @@ class PiePiece extends graphic.Sector {
|| data.getName(idx)
},
{ normal: {
- opacity: style && style.opacity
+ opacity: retrieve2(labelModel.get('opacity'), visualOpacity)
} }
);
+ const labelText = sector.getTextContent();
// Set textConfig on sector.
sector.setTextConfig({
@@ -187,18 +184,14 @@ class PiePiece extends graphic.Sector {
// Make sure update style on labelText after setLabelStyle.
// Because setLabelStyle will replace a new style on it.
-
labelText.attr({
z2: 10
});
- labelText.ignore = !labelModel.get('show');
- labelTextEmphasisState.ignore = !labelHoverModel.get('show');
-
// Default use item visual color
setLabelLineStyle(this, getLabelLineStatesModels(itemModel), {
stroke: visualColor,
- opacity: style && style.opacity
+ opacity: retrieve2(labelLineModel.get('opacity'), visualOpacity)
});
}
}
diff --git a/src/chart/pie/labelLayout.ts b/src/chart/pie/labelLayout.ts
index ad8acc4..e77155e 100644
--- a/src/chart/pie/labelLayout.ts
+++ b/src/chart/pie/labelLayout.ts
@@ -361,9 +361,7 @@ export default function (
textRect.applyTransform(label.getComputedTransform());
// Text has a default 1px stroke. Exclude this.
const margin = (label.style.margin || 0) + 2.1;
- textRect.x -= margin / 2;
textRect.y -= margin / 2;
- textRect.width += margin;
textRect.height += margin;
labelLayoutList.push({
diff --git a/src/label/labelStyle.ts b/src/label/labelStyle.ts
index 6a584c7..e8006b5 100644
--- a/src/label/labelStyle.ts
+++ b/src/label/labelStyle.ts
@@ -278,7 +278,7 @@ export function getLabelStatesModels<LabelName extends string = 'label'>(
*/
export function createTextStyle(
textStyleModel: Model,
- specifiedTextStyle?: TextStyleProps, // Can be overrided by settings in model.
+ specifiedTextStyle?: TextStyleProps, // Fixed style in the code. Can't be set by model.
opt?: Pick<TextCommonParams, 'inheritColor' | 'disableBox'>,
isNotNormal?: boolean, isAttached?: boolean // If text is attached on an element. If so, auto color will handling in zrender.
) {
diff --git a/test/pie-richText.html b/test/pie-richText.html
new file mode 100644
index 0000000..56c8aaa
--- /dev/null
+++ b/test/pie-richText.html
@@ -0,0 +1,377 @@
+<!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>
+
+
+
+
+
+
+
+
+
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ var option;
+ // $.getJSON('./data/nutrients.json', function (data) {});
+ var colorList = [{
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 1,
+ colorStops: [{
+ offset: 0,
+ color: 'rgba(51,192,205,0.01)' // 0% 处的颜色
+ },
+ {
+ offset: 1,
+ color: 'rgba(51,192,205,0.57)' // 100% 处的颜色
+ }
+ ],
+ globalCoord: false // 缺省为 false
+ },
+ {
+ type: 'linear',
+ x: 1,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0,
+ color: 'rgba(115,172,255,0.02)' // 0% 处的颜色
+ },
+ {
+ offset: 1,
+ color: 'rgba(115,172,255,0.67)' // 100% 处的颜色
+ }
+ ],
+ globalCoord: false // 缺省为 false
+ },
+ {
+ type: 'linear',
+ x: 1,
+ y: 0,
+ x2: 0,
+ y2: 0,
+ colorStops: [{
+ offset: 0,
+ color: 'rgba(158,135,255,0.02)' // 0% 处的颜色
+ },
+ {
+ offset: 1,
+ color: 'rgba(158,135,255,0.57)' // 100% 处的颜色
+ }
+ ],
+ globalCoord: false // 缺省为 false
+ },
+ {
+ type: 'linear',
+ x: 0,
+ y: 1,
+ x2: 0,
+ y2: 0,
+ colorStops: [{
+ offset: 0,
+ color: 'rgba(252,75,75,0.01)' // 0% 处的颜色
+ },
+ {
+ offset: 1,
+ color: 'rgba(252,75,75,0.57)' // 100% 处的颜色
+ }
+ ],
+ globalCoord: false // 缺省为 false
+ },
+ {
+ type: 'linear',
+ x: 1,
+ y: 1,
+ x2: 1,
+ y2: 0,
+ colorStops: [{
+ offset: 0,
+ color: 'rgba(253,138,106,0.01)' // 0% 处的颜色
+ },
+ {
+ offset: 1,
+ color: '#FDB36ac2' // 100% 处的颜色
+ }
+ ],
+ globalCoord: false // 缺省为 false
+ },
+ {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 1,
+ y2: 0,
+ colorStops: [{
+ offset: 0,
+ color: 'rgba(254,206,67,0.12)' // 0% 处的颜色
+ },
+ {
+ offset: 1,
+ color: '#FECE4391' // 100% 处的颜色
+ }
+ ],
+ globalCoord: false // 缺省为 false
+ }
+ ]
+ var colorLine = ['#33C0CD', '#73ACFF', '#9E87FF', '#FE6969', '#FDB36A', '#FECE43']
+
+ function getRich() {
+ let result = {}
+ colorLine.forEach((v, i) => {
+ result[`hr${i}`] = {
+ backgroundColor: colorLine[i],
+ borderRadius: 3,
+ width: 3,
+ height: 3,
+ padding: [3, 3, 0, -12]
+ }
+ result[`a${i}`] = {
+ padding: [8, -60, -20, -20],
+ color: colorLine[i],
+ fontSize: 12
+ }
+ })
+ return result
+ }
+ let data = [{
+ 'name': '北京',
+ 'value': 25
+ }, {
+ 'name': '上海',
+ 'value': 20
+ }, {
+ 'name': '广州',
+ 'value': 18
+ }, {
+ 'name': '深圳',
+ 'value': 15
+ }, {
+ 'name': '未知',
+ 'value': 13
+ }, {
+ 'name': '海外',
+ 'value': 9
+ }].sort((a, b) => {
+ return b.value - a.value
+ })
+ data.forEach((v, i) => {
+ v.labelLine = {
+ lineStyle: {
+ width: 1,
+ color: colorLine[i]
+ }
+ }
+ })
+ option = {
+ series: [{
+ type: 'pie',
+ radius: '60%',
+ center: ['50%', '50%'],
+ clockwise: true,
+ avoidLabelOverlap: true,
+ label: {
+ show: true,
+ position: 'outside',
+ formatter: function(params) {
+ const name = params.name
+ const percent = params.percent + '%'
+ const index = params.dataIndex
+ return [`{a${index}|${name}：${percent}}`, `{hr${index}|}`].join('\n')
+ },
+ rich: getRich()
+ },
+ itemStyle: {
+ normal: {
+ color: function(params) {
+ return colorList[params.dataIndex]
+ }
+ }
+ },
+ data,
+ roseType: 'radius'
+ }]
+ }
+
+ var chart = testHelper.create(echarts, 'main0', {
+ title: [
+ 'Test Case from https://gallery.echartsjs.com/editor.html?c=xgnWZ8Z9lI'
+ ],
+ option: option
+ // height: 300,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+ });
+ </script>
+
+
+
+
+
+
+
+
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ var option;
+ // $.getJSON('./data/nutrients.json', function (data) {});
+
+ var data = [{
+ value: 33310.12,
+ name: '邮件营销'
+ },
+ {
+ value: 234.88,
+ name: '联盟广告'
+ },
+ {
+ value: 13544444.44,
+ name: '视频广告'
+ },
+ {
+ value: 1.00,
+ name: '搜索引擎'
+ },
+ {
+ value: 310.12,
+ name: '测试文案1'
+ },
+ {
+ value: 234.33,
+ name: '测试文案2'
+ },
+ {
+ value: 135.55,
+ name: '测试文案3'
+ },
+ {
+ value: 1548,
+ name: '测试文案文字超多'
+ }
+ ];
+ var color = ['#000000', '#dedede', '#343434', '#dfdfdf', ];
+ option = {
+ // title: {
+ // text: '饼图标签两端对称效果',
+ // subtext: '关键词: [饼图][环形图][引导线距离饼距离][label两端对称][label距离引导线距离]',
+ // x: 'center'
+ // },
+ series: [
+ // // 这个pie用于形成引导线和饼图间距
+ {
+ type: 'pie',
+ radius: ['40%', '55%'],
+ minAngle: 90,
+ label: {
+ normal: {
+ show: false,
+ }
+ },
+ data: data,
+ },
+ {
+ name: '访问来源',
+ type: 'pie',
+ minAngle: 90, // label最小扇区大小
+ label: {
+ normal: {
+ alignTo: 'edge', // label两端对称布局
+ // ECharts v4.6.0 版本起，提供了 'labelLine' 与 'edge' 两种新的布局方式
+ margin: 90, // 布局为两端对称时候需要外边距防止图表变形 数值随意不要太大
+ distanceToLabelLine: 0, // label距离引导线距离
+ formatter: function(param) {
+ return '{a|' + param.name + '}\n{hr|}\n' + '{d|' + param.value + '}';
+ },
+ opacity: 1,
+ backgroundColor: 'rgba(255, 0, 0, 0.2)',
+ rich: {
+ a: {
+ padding: [4, 10, 0, 10], // 4边距是文字和hr间距，此处的边距10用于解决label和引导线有间距问题
+ color: 'blue'
+ },
+ d: {
+ padding: [0, 10, 4, 10],
+ color: 'purple'
+ },
+ hr: {
+ borderWidth: 1,
+ width: '100%',
+ height: 0,
+ borderColor: 'blue'
+ }
+ }
+ },
+ },
+ labelLine: {
+ lineStyle: {
+ color: 'blue'
+ }
+ },
+ itemStyle: {
+ opacity: 0
+ },
+ radius: ['40%', '60%'],
+ data: data,
+ }
+ ]
+ };
+ var chart = testHelper.create(echarts, 'main1', {
+ title: [
+ 'Test Case from https://gallery.echartsjs.com/editor.html?c=x1TVKFGtZ1'
+ ],
+ option: option
+ // height: 300,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+ });
+ </script>
+
+
+ </body>
+</html>
+
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org