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/22 16:01:38 UTC
[incubator-echarts] branch label-enhancement updated (804a99c ->
27c3cce)
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a change to branch label-enhancement
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git.
from 804a99c feat(pie): support overflow wrap
new 7db0a9c feat(label): enable darkMode
new f40e0dd feat(label): change label default color to black/white, 'inherit' to set color same with element
new 27c3cce fix(labelLine): fix error when labelLine don't have points
The 3 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/bar/BarView.ts | 2 +-
src/chart/bar/PictorialBarView.ts | 2 +-
src/chart/custom.ts | 2 +-
src/chart/gauge/GaugeView.ts | 6 ++--
src/chart/helper/Line.ts | 2 +-
src/chart/helper/Symbol.ts | 2 +-
src/chart/pie/PieSeries.ts | 1 +
src/chart/pie/PieView.ts | 5 ++-
src/chart/radar/RadarView.ts | 2 +-
src/chart/treemap/TreemapView.ts | 2 +-
src/component/marker/MarkAreaView.ts | 2 +-
src/echarts.ts | 6 ++++
src/label/labelGuideHelper.ts | 10 ++++--
src/model/globalDefault.ts | 2 ++
src/theme/dark.ts | 2 ++
src/util/graphic.ts | 61 +++++++++++++++----------------
test/pie-alignTo.html | 70 ++++++++++++++++++------------------
test/pie-label-extreme.html | 5 ++-
18 files changed, 101 insertions(+), 83 deletions(-)
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts] 02/03: feat(label): change label default color to black/white, 'inherit' to set color same with element
Posted by sh...@apache.org.
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
commit f40e0dd120edfcda5b1fb63d057627d9639c9701
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Jun 23 00:00:36 2020 +0800
feat(label): change label default color to black/white, 'inherit' to set color same with element
---
src/chart/bar/BarView.ts | 2 +-
src/chart/bar/PictorialBarView.ts | 2 +-
src/chart/custom.ts | 2 +-
src/chart/gauge/GaugeView.ts | 6 ++--
src/chart/helper/Line.ts | 2 +-
src/chart/helper/Symbol.ts | 2 +-
src/chart/pie/PieSeries.ts | 1 +
src/chart/pie/PieView.ts | 5 ++-
src/chart/radar/RadarView.ts | 2 +-
src/chart/treemap/TreemapView.ts | 2 +-
src/component/marker/MarkAreaView.ts | 2 +-
src/util/graphic.ts | 61 ++++++++++++++++++------------------
12 files changed, 45 insertions(+), 44 deletions(-)
diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts
index 90b3777..b9f86e2 100644
--- a/src/chart/bar/BarView.ts
+++ b/src/chart/bar/BarView.ts
@@ -566,7 +566,7 @@ function updateStyle(
labelFetcher: seriesModel,
labelDataIndex: dataIndex,
defaultText: getDefaultLabel(seriesModel.getData(), dataIndex),
- autoColor: style.fill as ColorString,
+ inheritColor: style.fill as ColorString,
defaultOutsidePosition: labelPositionOutside
}
);
diff --git a/src/chart/bar/PictorialBarView.ts b/src/chart/bar/PictorialBarView.ts
index e7d93da..e4a7429 100644
--- a/src/chart/bar/PictorialBarView.ts
+++ b/src/chart/bar/PictorialBarView.ts
@@ -952,7 +952,7 @@ function updateCommon(
labelFetcher: opt.seriesModel,
labelDataIndex: dataIndex,
defaultText: getDefaultLabel(opt.seriesModel.getData(), dataIndex),
- autoColor: symbolMeta.style.fill as ColorString,
+ inheritColor: symbolMeta.style.fill as ColorString,
defaultOutsidePosition: barPositionOutside
}
);
diff --git a/src/chart/custom.ts b/src/chart/custom.ts
index 3b801ff..28de10d 100644
--- a/src/chart/custom.ts
+++ b/src/chart/custom.ts
@@ -482,7 +482,7 @@ function makeRenderItem(customSeries, data, ecModel, api) {
: currLabelNormalModel;
const textStyle = graphicUtil.createTextStyle(labelModel, null, {
- autoColor: currVisualColor,
+ inheritColor: currVisualColor,
isRectText: true
});
diff --git a/src/chart/gauge/GaugeView.ts b/src/chart/gauge/GaugeView.ts
index 0540bac..cd766d0 100644
--- a/src/chart/gauge/GaugeView.ts
+++ b/src/chart/gauge/GaugeView.ts
@@ -262,7 +262,7 @@ class GaugeView extends ChartView {
y: unitY * (r - splitLineLen - distance) + cy,
verticalAlign: unitY < -0.4 ? 'top' : (unitY > 0.4 ? 'bottom' : 'middle'),
align: unitX < -0.4 ? 'left' : (unitX > 0.4 ? 'right' : 'center')
- }, {autoColor: autoColor}),
+ }, {inheritColor: autoColor}),
silent: true
}));
}
@@ -423,7 +423,7 @@ class GaugeView extends ChartView {
text: data.getName(0),
align: 'center',
verticalAlign: 'middle'
- }, {autoColor: autoColor})
+ }, {inheritColor: autoColor})
}));
}
}
@@ -463,7 +463,7 @@ class GaugeView extends ChartView {
height: isNaN(height) ? null : height,
align: 'center',
verticalAlign: 'middle'
- }, {autoColor: autoColor})
+ }, {inheritColor: autoColor})
}));
}
}
diff --git a/src/chart/helper/Line.ts b/src/chart/helper/Line.ts
index d67694d..72268ac 100644
--- a/src/chart/helper/Line.ts
+++ b/src/chart/helper/Line.ts
@@ -256,7 +256,7 @@ class Line extends graphic.Group {
label.useStyle(graphic.createTextStyle(labelModel, {
text: normalText as string
}, {
- autoColor: defaultLabelColor
+ inheritColor: defaultLabelColor
}));
label.__align = label.style.align;
diff --git a/src/chart/helper/Symbol.ts b/src/chart/helper/Symbol.ts
index 8689d63..2dd123d 100644
--- a/src/chart/helper/Symbol.ts
+++ b/src/chart/helper/Symbol.ts
@@ -266,7 +266,7 @@ class Symbol extends graphic.Group {
labelFetcher: seriesModel,
labelDataIndex: idx,
defaultText: getLabelDefaultText,
- autoColor: visualColor as ColorString
+ inheritColor: visualColor as ColorString
}
);
diff --git a/src/chart/pie/PieSeries.ts b/src/chart/pie/PieSeries.ts
index 5ed642b..01a828c 100644
--- a/src/chart/pie/PieSeries.ts
+++ b/src/chart/pie/PieSeries.ts
@@ -244,6 +244,7 @@ class PieSeriesModel extends SeriesModel<PieSeriesOption> {
height: null,
label: {
+ color: 'inherit',
// If rotate around circle
rotate: 0,
show: true,
diff --git a/src/chart/pie/PieView.ts b/src/chart/pie/PieView.ts
index 2c6fe97..1598a95 100644
--- a/src/chart/pie/PieView.ts
+++ b/src/chart/pie/PieView.ts
@@ -182,6 +182,7 @@ class PiePiece extends graphic.Sector {
{
labelFetcher: data.hostModel as PieSeriesModel,
labelDataIndex: idx,
+ inheritColor: visualColor,
defaultText: seriesModel.getFormattedLabel(idx, 'normal')
|| data.getName(idx)
},
@@ -193,9 +194,7 @@ class PiePiece extends graphic.Sector {
// Set textConfig on sector.
sector.setTextConfig({
local: true,
- insideStroke: visualColor,
- // insideFill: 'auto',
- outsideFill: visualColor
+ outsideFill: labelModel.get('color') === 'inherit' ? visualColor : 'auto'
});
// Make sure update style on labelText after setLabelStyle.
diff --git a/src/chart/radar/RadarView.ts b/src/chart/radar/RadarView.ts
index 397b67f..29bd6fb 100644
--- a/src/chart/radar/RadarView.ts
+++ b/src/chart/radar/RadarView.ts
@@ -237,7 +237,7 @@ class RadarView extends ChartView {
labelDataIndex: idx,
labelDimIndex: symbolPath.__dimIdx,
defaultText: defaultText as string,
- autoColor: color as ColorString
+ inheritColor: color as ColorString
}
);
});
diff --git a/src/chart/treemap/TreemapView.ts b/src/chart/treemap/TreemapView.ts
index b490cb5..db06317 100644
--- a/src/chart/treemap/TreemapView.ts
+++ b/src/chart/treemap/TreemapView.ts
@@ -936,7 +936,7 @@ function renderNode(
rectEl, normalLabelModel, emphasisLabelModel,
{
defaultText: isShow ? text : null,
- autoColor: visualColor
+ inheritColor: visualColor
}
);
diff --git a/src/component/marker/MarkAreaView.ts b/src/component/marker/MarkAreaView.ts
index 7398abb..574fc55 100644
--- a/src/component/marker/MarkAreaView.ts
+++ b/src/component/marker/MarkAreaView.ts
@@ -300,7 +300,7 @@ class MarkAreaView extends MarkerView {
labelFetcher: maModel,
labelDataIndex: idx,
defaultText: areaData.getName(idx) || '',
- autoColor: typeof style.fill === 'string'
+ inheritColor: typeof style.fill === 'string'
? colorUtil.modifyAlpha(style.fill, 1) : '#000'
}
);
diff --git a/src/util/graphic.ts b/src/util/graphic.ts
index 10e1bbd..bf863ba 100644
--- a/src/util/graphic.ts
+++ b/src/util/graphic.ts
@@ -122,10 +122,10 @@ type TextCommonParams = {
*/
disableBox?: boolean
/**
- * Specify a color when color is 'auto',
- * for textFill, textStroke, textBackgroundColor, and textBorderColor. If autoColor specified, it is used as default textFill.
+ * Specify a color when color is 'inherit',
+ * If inheritColor specified, it is used as default textFill.
*/
- autoColor?: ColorString
+ inheritColor?: ColorString
getTextPosition?: (textStyleModel: Model, isEmphasis?: boolean) => string | string[] | number[]
@@ -816,7 +816,7 @@ export {setLabelStyle};
export function createTextStyle(
textStyleModel: Model,
specifiedTextStyle?: TextStyleProps, // Can be overrided by settings in model.
- opt?: Pick<TextCommonParams, 'autoColor' | 'disableBox'>,
+ opt?: Pick<TextCommonParams, 'inheritColor' | 'disableBox'>,
isNotNormal?: boolean,
isAttached?: boolean // If text is attached on an element. If so, auto color will handling in zrender.
) {
@@ -831,7 +831,7 @@ export function createTextStyle(
export function createTextConfig(
textStyle: TextStyleProps,
textStyleModel: Model,
- opt?: Pick<TextCommonParams, 'getTextPosition' | 'defaultOutsidePosition' | 'autoColor'>,
+ opt?: Pick<TextCommonParams, 'getTextPosition' | 'defaultOutsidePosition' | 'inheritColor'>,
isNotNormal?: boolean
) {
const textConfig: ElementTextConfig = {};
@@ -868,19 +868,10 @@ export function createTextConfig(
}
// fill and auto is determined by the color of path fill if it's not specified by developers.
- textConfig.outsideFill = opt.autoColor || null;
- // if (!textStyle.fill) {
- // textConfig.insideFill = 'auto';
- // textConfig.outsideFill = opt.autoColor || null;
- // }
- // if (!textStyle.stroke) {
- // textConfig.insideStroke = 'auto';
- // }
- // else if (opt.autoColor) {
- // // TODO: stroke set to autoColor. if label is inside?
- // textConfig.insideStroke = opt.autoColor;
- // }
+ textConfig.outsideFill = textStyleModel.get('color') === 'inherit'
+ ? (opt.inheritColor || null)
+ : 'auto';
return textConfig;
}
@@ -898,7 +889,7 @@ export function createTextConfig(
function setTextStyleCommon(
textStyle: TextStyleProps,
textStyleModel: Model,
- opt?: Pick<TextCommonParams, 'autoColor' | 'disableBox'>,
+ opt?: Pick<TextCommonParams, 'inheritColor' | 'disableBox'>,
isNotNormal?: boolean,
isAttached?: boolean
) {
@@ -1003,7 +994,7 @@ function setTokenTextStyle(
textStyle: TextStyleProps['rich'][string],
textStyleModel: Model<LabelOption>,
globalTextStyle: LabelOption,
- opt?: Pick<TextCommonParams, 'autoColor' | 'disableBox'>,
+ opt?: Pick<TextCommonParams, 'inheritColor' | 'disableBox'>,
isNotNormal?: boolean,
isAttached?: boolean,
isBlock?: boolean
@@ -1011,14 +1002,24 @@ function setTokenTextStyle(
// In merge mode, default value should not be given.
globalTextStyle = !isNotNormal && globalTextStyle || EMPTY_OBJ;
- const autoColor = opt && opt.autoColor;
+ const inheritColor = opt && opt.inheritColor;
let fillColor = textStyleModel.getShallow('color');
let strokeColor = textStyleModel.getShallow('textBorderColor');
- if (fillColor === 'auto' && autoColor) {
- fillColor = autoColor;
+ if (fillColor === 'inherit') {
+ if (inheritColor) {
+ fillColor = inheritColor;
+ }
+ else {
+ fillColor = null;
+ }
}
- if (strokeColor === 'auto' && autoColor) {
- strokeColor = autoColor;
+ if (strokeColor === 'inherit' && inheritColor) {
+ if (inheritColor) {
+ strokeColor = inheritColor;
+ }
+ else {
+ strokeColor = inheritColor;
+ }
}
fillColor = fillColor || globalTextStyle.color;
strokeColor = strokeColor || globalTextStyle.textBorderColor;
@@ -1040,8 +1041,8 @@ function setTokenTextStyle(
// TODO
if (!isNotNormal && !isAttached) {
// Set default finally.
- if (textStyle.fill == null && opt.autoColor) {
- textStyle.fill = opt.autoColor;
+ if (textStyle.fill == null && opt.inheritColor) {
+ textStyle.fill = opt.inheritColor;
}
}
@@ -1073,11 +1074,11 @@ function setTokenTextStyle(
if (!isBlock || !opt.disableBox) {
- if (textStyle.backgroundColor === 'auto' && autoColor) {
- textStyle.backgroundColor = autoColor;
+ if (textStyle.backgroundColor === 'auto' && inheritColor) {
+ textStyle.backgroundColor = inheritColor;
}
- if (textStyle.borderColor === 'auto' && autoColor) {
- textStyle.borderColor = autoColor;
+ if (textStyle.borderColor === 'auto' && inheritColor) {
+ textStyle.borderColor = inheritColor;
}
for (let i = 0; i < TEXT_PROPS_BOX.length; i++) {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts] 01/03: feat(label): enable darkMode
Posted by sh...@apache.org.
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
commit 7db0a9c01d9eb817e2d8adf39754dc8c314f5a55
Author: pissang <bm...@gmail.com>
AuthorDate: Mon Jun 22 23:59:17 2020 +0800
feat(label): enable darkMode
---
src/echarts.ts | 6 ++++++
src/model/globalDefault.ts | 2 ++
src/theme/dark.ts | 2 ++
3 files changed, 10 insertions(+)
diff --git a/src/echarts.ts b/src/echarts.ts
index 31a9fb8..ba7f00e 100644
--- a/src/echarts.ts
+++ b/src/echarts.ts
@@ -1327,6 +1327,7 @@ class ECharts extends Eventful {
// Set background
let backgroundColor = ecModel.get('backgroundColor') || 'transparent';
+ const darkMode = ecModel.get('darkMode');
// In IE8
if (!env.canvasSupported) {
@@ -1338,6 +1339,11 @@ class ECharts extends Eventful {
}
else {
zr.setBackgroundColor(backgroundColor);
+
+ // Force set dark mode.
+ if (darkMode != null && darkMode !== 'auto') {
+ zr.setDarkMode(darkMode);
+ }
}
performPostUpdateFuncs(ecModel, api);
diff --git a/src/model/globalDefault.ts b/src/model/globalDefault.ts
index fe4feb3..c47f865 100644
--- a/src/model/globalDefault.ts
+++ b/src/model/globalDefault.ts
@@ -25,6 +25,8 @@ if (typeof navigator !== 'undefined') {
}
export default {
+
+ darkMode: 'auto',
// backgroundColor: 'rgba(0,0,0,0)',
// https://dribbble.com/shots/1065960-Infographic-Pie-chart-visualization
diff --git a/src/theme/dark.ts b/src/theme/dark.ts
index 02439bd..9e4cc18 100644
--- a/src/theme/dark.ts
+++ b/src/theme/dark.ts
@@ -54,6 +54,8 @@ const colorPalette = [
'#eedd78', '#73a373', '#73b9bc', '#7289ab', '#91ca8c', '#f49f42'
];
const theme = {
+ darkMode: true,
+
color: colorPalette,
backgroundColor: '#333',
tooltip: {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts] 03/03: fix(labelLine): fix error when labelLine
don't have points
Posted by sh...@apache.org.
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
commit 27c3cce86ed76771b381e7920a89ebe6534e6b77
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Jun 23 00:00:55 2020 +0800
fix(labelLine): fix error when labelLine don't have points
---
src/label/labelGuideHelper.ts | 10 +++++--
test/pie-alignTo.html | 70 +++++++++++++++++++++----------------------
test/pie-label-extreme.html | 5 +++-
3 files changed, 46 insertions(+), 39 deletions(-)
diff --git a/src/label/labelGuideHelper.ts b/src/label/labelGuideHelper.ts
index 1614b39..5de5092 100644
--- a/src/label/labelGuideHelper.ts
+++ b/src/label/labelGuideHelper.ts
@@ -485,8 +485,11 @@ function setLabelLineState(
function buildLabelLinePath(path: CanvasRenderingContext2D, shape: Polyline['shape']) {
const smooth = shape.smooth as number;
const points = shape.points;
+ if (!points) {
+ return;
+ }
path.moveTo(points[0][0], points[0][1]);
- if (smooth > 0) {
+ if (smooth > 0 && points.length >= 3) {
const len1 = vector.dist(points[0], points[1]);
const len2 = vector.dist(points[1], points[2]);
if (!len1 || !len2) {
@@ -505,8 +508,9 @@ function buildLabelLinePath(path: CanvasRenderingContext2D, shape: Polyline['sha
path.bezierCurveTo(midPoint2[0], midPoint2[1], midPoint2[0], midPoint2[1], points[2][0], points[2][1]);
}
else {
- path.lineTo(points[1][0], points[1][1]);
- path.lineTo(points[2][0], points[2][1]);
+ for (let i = 1; i < points.length; i++) {
+ path.lineTo(points[i][0], points[i][1]);
+ }
}
}
diff --git a/test/pie-alignTo.html b/test/pie-alignTo.html
index db08612..ab95d50 100644
--- a/test/pie-alignTo.html
+++ b/test/pie-alignTo.html
@@ -211,45 +211,45 @@ under the License.
});
var config = {
length2: 15,
- margin: 20
+ margin: 20,
+ overflow: 'truncate'
};
- gui
- .add(config, 'length2', 0, 300)
- .onChange(function (value) {
- if (chart0) {
- option0.series[0].labelLine.length2 = value;
- option1.series[0].labelLine.length2 = value;
- optionNone.series[0].labelLine.length2 = value;
- chart0.setOption(option0);
- chart1.setOption(option1);
- chartNone.setOption(optionNone);
-
- for (var i = 0; i < 4; ++i) {
- option2.series[i].labelLine.length2 = value;
+ function update() {
+ const newOpt = {
+ series: [{
+ labelLine: {
+ length2: config.length2
+ },
+ label: {
+ margin: config.margin,
+ overflow: config.overflow
}
- chart2.setOption(option2);
- }
- });
-
- gui
- .add(config, 'margin', 0, 300)
- .onChange(function (value) {
- if (chart0) {
- option0.series[0].label.margin = value;
- option1.series[0].label.margin = value;
- optionNone.series[0].label.margin = value;
- chart0.setOption(option0);
- chart1.setOption(option1);
- chartNone.setOption(optionNone);
-
- for (var i = 0; i < 4; ++i) {
- option2.series[i].label.margin = value;
+ }]
+ }
+ chart0.setOption(newOpt);
+ chart1.setOption(newOpt);
+ chartNone.setOption(newOpt);
+
+ const newOpt2 = { series: [] };
+ for (var i = 0; i < 4; ++i) {
+ newOpt2.series.push({
+ labelLine: {
+ length2: config.length2,
+ },
+ label: {
+ margin: config.margin,
+ overflow: config.overflow
}
- chart2.setOption(option2);
- }
- });
- });
+ })
+ }
+ chart2.setOption(newOpt2);
+ }
+
+ gui.add(config, 'length2', 0, 300).onChange(update);
+ gui.add(config, 'margin', 0, 300).onChange(update);
+ gui.add(config, 'overflow', ['truncate', 'break', 'breakAll']).onChange(update);
+ });
</script>
</body>
</html>
diff --git a/test/pie-label-extreme.html b/test/pie-label-extreme.html
index e919d8a..fb9a278 100644
--- a/test/pie-label-extreme.html
+++ b/test/pie-label-extreme.html
@@ -74,6 +74,9 @@ under the License.
"fontSize": 10
},
"labelLine": {
+ "lineStyle": {
+ "color": '#ccc'
+ },
"smooth": true
},
"data": [{
@@ -708,7 +711,7 @@ under the License.
labelFolder.open();
labelLineFolder.open();
labelFolder.add(config.label, 'alignTo', ['none', 'edge', 'labelLine']).onChange(update);
- labelFolder.add(config.label, 'overflow', ['truncate', 'wrap']).onChange(update);
+ labelFolder.add(config.label, 'overflow', ['truncate', 'break', 'breakAll']).onChange(update);
labelFolder.add(config.label, 'margin', 0, 50).onChange(update);
labelFolder.add(config.label, 'bleedMargin', 0, 500).onChange(update);
labelLineFolder.add(config.labelLine, 'length', 0, 500).onChange(update);
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org