You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2021/03/17 10:10:02 UTC
[echarts] branch fix-legend created (now aa7f802)
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a change to branch fix-legend
in repository https://gitbox.apache.org/repos/asf/echarts.git.
at aa7f802 WIP(legend): fix symbolSize
This branch includes the following new commits:
new e7f431a WIP(legend): merge #12444 and current master
new 1c93de6 feat(legend): line series default legend and customed style
new 402f8f5 WIP(legend): reserve emptyCircle
new bf2529e WIP(legend): use default style in series
new 39d4e53 WIP(legend): refactor and use fixed line width
new 7955fd8 WIP(legend): default symbolSize as 80% itemHeight while it can also inherit
new 3646296 WIP(legend): style when series is not selected
new a654399 test(legend): update test cases
new 635d986 Merge branch 'master' into fix-legend
new aa7f802 WIP(legend): fix symbolSize
The 10 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.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts] 01/10: WIP(legend): merge #12444 and current master
Posted by ov...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch fix-legend
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit e7f431a4acc5ced63736bb4beffc2d9632ddc44f
Author: Ovilia <zw...@gmail.com>
AuthorDate: Tue Mar 2 13:41:37 2021 +0800
WIP(legend): merge #12444 and current master
---
src/chart/line/LineSeries.ts | 10 ++-
src/chart/line/install.ts | 16 ++++
src/component/legend/LegendModel.ts | 2 +-
src/component/legend/LegendView.ts | 47 +++++++++---
src/data/List.ts | 4 +-
src/util/symbol.ts | 23 +++---
src/visual/style.ts | 12 ++-
test/legend-style.html | 144 ++++++++++++++++++++++++++++++++++++
8 files changed, 226 insertions(+), 32 deletions(-)
diff --git a/src/chart/line/LineSeries.ts b/src/chart/line/LineSeries.ts
index f940873..1876ab0 100644
--- a/src/chart/line/LineSeries.ts
+++ b/src/chart/line/LineSeries.ts
@@ -127,6 +127,8 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> {
hasSymbolVisual = true;
legendSymbol = 'line';
+ visualDrawType = 'stroke' as const;
+
getInitialData(option: LineSeriesOption): List {
if (__DEV__) {
const coordSys = option.coordinateSystem;
@@ -151,6 +153,12 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> {
position: 'top'
},
+ itemStyle: {
+ color: 'white',
+ borderColor: 'auto',
+ borderWidth: 1
+ },
+
endLabel: {
show: false,
valueAnimation: true,
@@ -181,7 +189,7 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> {
// Disabled if step is true
smooth: false,
smoothMonotone: null,
- symbol: 'emptyCircle',
+ symbol: 'circle',
symbolSize: 4,
symbolRotate: null,
diff --git a/src/chart/line/install.ts b/src/chart/line/install.ts
index af11575..4738554 100644
--- a/src/chart/line/install.ts
+++ b/src/chart/line/install.ts
@@ -19,6 +19,7 @@
import LineSeries from './LineSeries';
import LineView from './LineView';
+import LineSeriesModel from './LineSeries';
// In case developer forget to include grid component
@@ -34,6 +35,21 @@ export function install(registers: EChartsExtensionInstallRegisters) {
registers.registerLayout(layoutPoints('line', true));
+ registers.registerVisual({
+ seriesType: 'line',
+ reset: function (seriesModel: LineSeriesModel) {
+ // Visual coding for legend
+ const lineStyle = seriesModel.getModel('lineStyle');
+ console.log(lineStyle.get('color'), lineStyle.get('width'))
+ if (lineStyle) {
+ seriesModel.getData().setVisual('legendSymbolStyle', {
+ color: lineStyle.get('color'),
+ borderWidth: lineStyle.get('width')
+ });
+ }
+ }
+ });
+
// Down sample after filter
registers.registerProcessor(
registers.PRIORITY.PROCESSOR.STATISTIC,
diff --git a/src/component/legend/LegendModel.ts b/src/component/legend/LegendModel.ts
index 674e4f2..074cb4e 100644
--- a/src/component/legend/LegendModel.ts
+++ b/src/component/legend/LegendModel.ts
@@ -405,7 +405,7 @@ class LegendModel<Ops extends LegendOption = LegendOption> extends ComponentMode
inactiveBorderColor: '#ccc',
itemStyle: {
- borderWidth: 0
+ // borderWidth: 0
},
textStyle: {
diff --git a/src/component/legend/LegendView.ts b/src/component/legend/LegendView.ts
index cabb0367..b170572 100644
--- a/src/component/legend/LegendView.ts
+++ b/src/component/legend/LegendView.ts
@@ -35,13 +35,16 @@ import {
ZRRectLike,
ECElement,
CommonTooltipOption,
- ColorString
+ ColorString,
+ SeriesOption,
+ SymbolOptionMixin
} from '../../util/types';
import Model from '../../model/Model';
import Displayable, { DisplayableState } from 'zrender/src/graphic/Displayable';
import { PathStyleProps } from 'zrender/src/graphic/Path';
import { parse, stringify } from 'zrender/src/tool/color';
import {PatternObject} from 'zrender/src/graphic/Pattern';
+import {SeriesModel} from '../../echarts';
const curry = zrUtil.curry;
const each = zrUtil.each;
@@ -187,7 +190,8 @@ class LegendView extends ComponentView {
}
// Representitive series.
- const seriesModel = ecModel.getSeriesByName(name)[0];
+ const seriesModel = ecModel.getSeriesByName(name)[0] as
+ SeriesModel<SeriesOption & SymbolOptionMixin>;
if (legendDrawnMap.get(name)) {
// Have been drawed
@@ -200,17 +204,20 @@ class LegendView extends ComponentView {
const style = data.getVisual('style');
const color = style[data.getVisual('drawType')] || style.fill;
const borderColor = style.stroke;
+ const borderWidth = style.lineWidth;
const decal = style.decal;
// Using rect symbol defaultly
const legendSymbolType = data.getVisual('legendSymbol') || 'roundRect';
+ const legendSymbolStyle = data.getVisual('legendSymbolStyle') || {};
const symbolType = data.getVisual('symbol');
+ const symbolSize = seriesModel.get('symbolSize');
const itemGroup = this._createItem(
name, dataIndex, itemModel, legendModel,
- legendSymbolType, symbolType,
- itemAlign, color, borderColor, decal,
- selectMode
+ legendSymbolType, symbolType, symbolSize,
+ itemAlign, color, borderColor, borderWidth,
+ legendSymbolStyle, decal, selectMode
);
itemGroup.on('click', curry(dispatchSelectAction, name, null, api, excludeSeriesId))
@@ -238,6 +245,7 @@ class LegendView extends ComponentView {
const style = provider.getItemVisual(idx, 'style') as PathStyleProps;
const borderColor = style.stroke;
+ const borderWidth = style.lineWidth;
const decal = style.decal;
let color = style.fill;
const colorArr = parse(style.fill as ColorString);
@@ -253,9 +261,9 @@ class LegendView extends ComponentView {
const itemGroup = this._createItem(
name, dataIndex, itemModel, legendModel,
- legendSymbolType, null,
- itemAlign, color, borderColor, decal,
- selectMode
+ legendSymbolType, null, null,
+ itemAlign, color, borderColor, borderWidth,
+ {}, decal, selectMode
);
// FIXME: consider different series has items with the same name.
@@ -333,12 +341,20 @@ class LegendView extends ComponentView {
legendModel: LegendModel,
legendSymbolType: string,
symbolType: string,
+ symbolSize: number | number[],
itemAlign: LegendOption['align'],
color: ZRColor,
borderColor: ZRColor,
+ borderWidth: number,
+ legendSymbolStyle: ItemStyleOption,
decal: PatternObject,
selectMode: LegendOption['selectedMode']
) {
+ if (symbolSize != null && typeof symbolSize === 'object') {
+ // Use symbol height as symbol size if it's an array
+ symbolSize = symbolSize[1];
+ }
+
const itemWidth = legendModel.get('itemWidth');
const itemHeight = legendModel.get('itemHeight');
const inactiveColor = legendModel.get('inactiveColor');
@@ -371,7 +387,8 @@ class LegendView extends ComponentView {
itemGroup.add(
setSymbolStyle(
legendSymbol, legendSymbolType, legendModelItemStyle,
- borderColor, inactiveBorderColor, decal, isSelected
+ legendSymbolStyle.color || borderColor, legendSymbolStyle.borderWidth || borderWidth,
+ inactiveBorderColor, decal, isSelected
)
);
@@ -381,7 +398,9 @@ class LegendView extends ComponentView {
// At least show one symbol, can't be all none
&& ((symbolType !== legendSymbolType) || symbolType === 'none')
) {
- const size = itemHeight * 0.8;
+ const size = symbolSize == null
+ ? itemHeight * 0.8
+ : Math.min(itemHeight, symbolSize as number);
if (symbolType === 'none') {
symbolType = 'circle';
}
@@ -399,7 +418,7 @@ class LegendView extends ComponentView {
itemGroup.add(
setSymbolStyle(
legendSymbolCenter, symbolType, legendModelItemStyle,
- borderColor, inactiveBorderColor, decal, isSelected
+ borderColor, borderWidth, inactiveBorderColor, decal, isSelected
)
);
}
@@ -553,13 +572,17 @@ function setSymbolStyle(
symbolType: string,
legendModelItemStyle: Model<ItemStyleOption>,
borderColor: ZRColor,
+ borderWidth: number,
inactiveBorderColor: ZRColor,
decal: PatternObject,
isSelected: boolean
) {
let itemStyle;
- if (symbolType !== 'line' && symbolType.indexOf('empty') < 0) {
+ if (symbolType.indexOf('empty') < 0) {
itemStyle = legendModelItemStyle.getItemStyle();
+ itemStyle.lineWidth = borderWidth;
+ // itemStyle.
+ itemStyle.stroke = borderColor;
(symbol as graphic.Path).style.stroke = borderColor;
(symbol as graphic.Path).style.decal = decal;
if (!isSelected) {
diff --git a/src/data/List.ts b/src/data/List.ts
index 7a8b245..72f79dc 100644
--- a/src/data/List.ts
+++ b/src/data/List.ts
@@ -35,7 +35,8 @@ import Element from 'zrender/src/Element';
import {
DimensionIndex, DimensionName, DimensionLoose, OptionDataItem,
ParsedValue, ParsedValueNumeric, OrdinalNumber, DimensionUserOuput,
- ModelOption, SeriesDataType, OptionSourceData, SOURCE_FORMAT_TYPED_ARRAY, SOURCE_FORMAT_ORIGINAL, DecalObject
+ ModelOption, SeriesDataType, OptionSourceData, SOURCE_FORMAT_TYPED_ARRAY, SOURCE_FORMAT_ORIGINAL,
+ DecalObject, ItemStyleOption
} from '../util/types';
import {isDataItemOption, convertOptionIdName} from '../util/model';
import { getECData } from '../util/innerStore';
@@ -139,6 +140,7 @@ export interface DefaultDataVisual {
liftZ?: number
// For legend.
legendSymbol?: string
+ legendSymbolStyle?: ItemStyleOption
// visualMap will inject visualMeta data
visualMeta?: VisualMeta[]
diff --git a/src/util/symbol.ts b/src/util/symbol.ts
index 8b5dc28..bd7c4e6 100644
--- a/src/util/symbol.ts
+++ b/src/util/symbol.ts
@@ -174,9 +174,7 @@ const Arrow = graphic.Path.extend({
*/
// TODO Use function to build symbol path.
const symbolCtors: Dictionary<SymbolCtor> = {
- // Use small height rect to simulate line.
- // Avoid using stroke.
- line: graphic.Rect as unknown as SymbolCtor,
+ line: graphic.Line as unknown as SymbolCtor,
rect: graphic.Rect as unknown as SymbolCtor,
@@ -196,16 +194,13 @@ const symbolCtors: Dictionary<SymbolCtor> = {
};
-// NOTICE Only use fill. No line!
const symbolShapeMakers: Dictionary<SymbolShapeMaker> = {
- line: function (x, y, w, h, shape: graphic.Rect['shape']) {
- const thickness = 2;
- // A thin line
- shape.x = x;
- shape.y = y + h / 2 - thickness / 2;
- shape.width = w;
- shape.height = thickness;
+ line: function (x, y, w, h, shape: graphic.Line['shape']) {
+ shape.x1 = x;
+ shape.y1 = y + h / 2;
+ shape.x2 = x + w;
+ shape.y2 = y + h / 2;
},
rect: function (x, y, w, h, shape: graphic.Rect['shape']) {
@@ -317,8 +312,6 @@ function symbolPathSetColor(this: ECSymbol, color: ZRColor, innerColor?: string)
if (this.__isEmptyBrush) {
symbolStyle.stroke = color;
symbolStyle.fill = innerColor || '#fff';
- // TODO Same width with lineStyle in LineView.
- symbolStyle.lineWidth = 2;
}
else {
symbolStyle.fill = color;
@@ -344,7 +337,9 @@ export function createSymbol(
const isEmpty = symbolType.indexOf('empty') === 0;
if (isEmpty) {
- symbolType = symbolType.substr(5, 1).toLowerCase() + symbolType.substr(6);
+ const realSymbolType = symbolType.substr(5, 1).toLowerCase() + symbolType.substr(6);
+ console.warn(`[DEPRECATED] Shape "${symbolType}" is deprecated. Please use "${realSymbolType}" with "fill" as "white" instead.`);
+ symbolType = realSymbolType;
}
let symbolPath: ECSymbol | graphic.Image;
diff --git a/src/visual/style.ts b/src/visual/style.ts
index e8c6832..082ca03 100644
--- a/src/visual/style.ts
+++ b/src/visual/style.ts
@@ -88,16 +88,22 @@ const seriesStyleTask: StageHandler = {
// TODO style callback
const colorCallback = isFunction(color) ? color as unknown as ColorCallback : null;
+ const hasAutoColor = globalStyle.fill === 'auto' || globalStyle.stroke === 'auto';
// Get from color palette by default.
- if (!globalStyle[colorKey] || colorCallback) {
+ if (!globalStyle[colorKey] || colorCallback || hasAutoColor) {
// Note: if some series has color specified (e.g., by itemStyle.color), we DO NOT
// make it effect palette. Bacause some scenarios users need to make some series
// transparent or as background, which should better not effect the palette.
- globalStyle[colorKey] = seriesModel.getColorFromPalette(
+ const colorPalette = seriesModel.getColorFromPalette(
// TODO series count changed.
seriesModel.name, null, ecModel.getSeriesCount()
);
- data.setVisual('colorFromPalette', true);
+ if (!globalStyle[colorKey]) {
+ globalStyle[colorKey] = colorPalette;
+ data.setVisual('colorFromPalette', true);
+ }
+ globalStyle.fill = globalStyle.fill === 'auto' ? colorPalette : globalStyle.fill;
+ globalStyle.stroke = globalStyle.stroke === 'auto' ? colorPalette : globalStyle.stroke;
}
data.setVisual('style', globalStyle);
diff --git a/test/legend-style.html b/test/legend-style.html
new file mode 100644
index 0000000..70bd350
--- /dev/null
+++ b/test/legend-style.html
@@ -0,0 +1,144 @@
+<!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="main1"></div>
+
+ <script>
+ require(['echarts'], function (echarts) {
+ var getData = function (seriesId) {
+ var data = [];
+ for (var i = 0; i < 7; ++i) {
+ data.push(Math.random() * 100 + (seriesId + 1) * 200);
+ }
+ return data;
+ };
+
+ var option = {
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ legend: {
+ data: ['Default Line', 'Line with emptyCircle', 'Line with emptyCircle and color', 'Line with style', 'Line with visualMap', 'Pie A', 'Pie B', 'Pie C']
+ },
+ series: [{
+ data: getData(0),
+ type: 'line',
+ name: 'Default Line'
+ }, {
+ data: getData(1),
+ type: 'line',
+ name: 'Line with emptyCircle',
+ symbol: 'emptyCircle'
+ }, {
+ data: getData(2),
+ type: 'line',
+ name: 'Line with emptyCircle and color',
+ symbol: 'emptyCircle',
+ itemStyle: {
+ color: 'auto'
+ }
+ }, {
+ data: getData(3),
+ type: 'line',
+ name: 'Line with style',
+ symbolSize: 12,
+ itemStyle: {
+ color: 'auto',
+ borderColor: 'blue',
+ borderWidth: 2,
+ symbolSize: 25
+ },
+ lineStyle: {
+ color: 'red',
+ width: 4
+ }
+ }, {
+ data: getData(4),
+ type: 'line',
+ name: 'Line with visualMap',
+ symbolSize: 30,
+ itemStyle: {
+ borderColor: 'green'
+ }
+ }, {
+ type: 'pie',
+ data: [{
+ name: 'Pie A',
+ value: 10
+ }, {
+ name: 'Pie B',
+ value: 8
+ }, {
+ name: 'Pie C',
+ value: 14,
+ itemStyle: {
+ color: 'blue'
+ }
+ }],
+ center: ['80%', '50%']
+ }],
+ grid: {
+ left: 60,
+ width: '55%'
+ },
+ visualMap: {
+ type: 'continuous',
+ min: 1000,
+ max: 1100,
+ inRange: {
+ color: ['green', 'yellow', 'red']
+ },
+ show: false,
+ seriesIndex: 4
+ }
+ };
+
+ var chart = testHelper.create(echarts, 'main1', {
+ title: [
+ 'Legend icon being more intuitive'
+ ],
+ option: option
+ });
+ });
+ </script>
+
+
+ </body>
+</html>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts] 07/10: WIP(legend): style when series is not selected
Posted by ov...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch fix-legend
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 3646296961ce1e1279e18297a294bca8849f10e1
Author: Ovilia <zw...@gmail.com>
AuthorDate: Wed Mar 17 15:52:38 2021 +0800
WIP(legend): style when series is not selected
---
src/chart/line/install.ts | 6 +-----
src/component/legend/LegendModel.ts | 4 ++++
src/component/legend/LegendView.ts | 25 ++++++++++++++++---------
src/data/List.ts | 4 ++--
4 files changed, 23 insertions(+), 16 deletions(-)
diff --git a/src/chart/line/install.ts b/src/chart/line/install.ts
index b5dd22f..c493d97 100644
--- a/src/chart/line/install.ts
+++ b/src/chart/line/install.ts
@@ -42,15 +42,11 @@ export function install(registers: EChartsExtensionInstallRegisters) {
const lineStyle = seriesModel.getModel('lineStyle').getLineStyle();
const itemStyle = seriesModel.getModel('itemStyle').getItemStyle();
const color = itemStyle && itemStyle.fill;
- console.log(itemStyle, lineStyle);
if (lineStyle) {
lineStyle.stroke = lineStyle.stroke || color;
}
- seriesModel.getData().setVisual('legendSymbolStyle', {
- itemStyle,
- lineStyle
- });
+ seriesModel.getData().setVisual('legendLineStyle', lineStyle);
}
});
diff --git a/src/component/legend/LegendModel.ts b/src/component/legend/LegendModel.ts
index c9997cd..3b561d9 100644
--- a/src/component/legend/LegendModel.ts
+++ b/src/component/legend/LegendModel.ts
@@ -93,6 +93,8 @@ export interface LegendLineStyleOption {
shadowColor?: ColorString | 'inherit'
shadowOffsetX?: number | 'inherit'
shadowOffsetY?: number | 'inherit'
+ inactiveColor?: ColorString,
+ inactiveWidth?: number
}
export interface LegendStyleOption {
@@ -476,6 +478,8 @@ class LegendModel<Ops extends LegendOption = LegendOption> extends ComponentMode
lineStyle: {
width: 'auto',
color: 'inherit',
+ inactiveColor: '#ccc',
+ inactiveWidth: 2,
opacity: 'inherit',
type: 'inherit',
cap: 'inherit',
diff --git a/src/component/legend/LegendView.ts b/src/component/legend/LegendView.ts
index 6f37e72..c4374fe 100644
--- a/src/component/legend/LegendView.ts
+++ b/src/component/legend/LegendView.ts
@@ -25,7 +25,7 @@ import {setLabelStyle, createTextStyle} from '../../label/labelStyle';
import {makeBackground} from '../helper/listComponent';
import * as layoutUtil from '../../util/layout';
import ComponentView from '../../view/Component';
-import LegendModel, { LegendItemStyleOption, LegendLineStyleOption, LegendOption, LegendSelectorButtonOption, LegendStyleOption, LegendSymbolStyleOption, LegendTooltipFormatterParams } from './LegendModel';
+import LegendModel, { LegendItemStyleOption, LegendLineStyleOption, LegendOption, LegendSelectorButtonOption, LegendTooltipFormatterParams } from './LegendModel';
import GlobalModel from '../../model/Global';
import ExtensionAPI from '../../core/ExtensionAPI';
import {
@@ -208,14 +208,13 @@ class LegendView extends ComponentView {
// Legend to control series.
if (seriesModel) {
const data = seriesModel.getData();
- const lineVisualStyle = (data.getVisual('legendSymbolStyle') || {}).lineStyle;
+ const lineVisualStyle = data.getVisual('legendLineStyle') || {};
/**
* `data.getVisual('style')` may be the color from the register
* in series. For example, for line series,
*/
const style = data.getVisual('style');
- console.log(style, lineVisualStyle);
// Using rect symbol defaultly
const legendSymbolType = data.getVisual('legendSymbol') || 'roundRect';
@@ -223,7 +222,6 @@ class LegendView extends ComponentView {
const symbolSize = data.getVisual('symbolSize');
data.getVisual('symbolSize');
- console.log(symbolSize)
const itemGroup = this._createItem(
name, dataIndex, legendItemModel, legendModel,
@@ -356,14 +354,12 @@ class LegendView extends ComponentView {
const itemHeight = legendModel.get('itemHeight');
const isSelected = legendModel.isSelected(name);
- const inactiveColor = itemModel.get('inactiveColor');
- const inactiveBorderColor = itemModel.get('inactiveBorderColor');
const symbolKeepAspect = itemModel.get('symbolKeepAspect');
const legendSymbolSize = itemModel.get('symbolSize');
if (legendSymbolSize === 'auto') {
// auto: 80% itemHeight
- symbolSize = itemHeight * 0.8;
+ symbolSize = itemHeight * 0.8;
}
else if (legendSymbolSize !== 'inherit') {
// number: legend.symbolSize
@@ -371,7 +367,8 @@ class LegendView extends ComponentView {
}
// inherit: series.symbolSize, which is passed in by function parameter
- const style = getLegendStyle(itemModel, lineVisualStyle, itemVisualStyle, isColorBySeries);
+ const legendLineStyle = legendModel.getModel('lineStyle');
+ const style = getLegendStyle(itemModel, legendLineStyle, lineVisualStyle, itemVisualStyle, isColorBySeries, isSelected);
symbolType = symbolType || 'roundRect';
@@ -417,6 +414,7 @@ class LegendView extends ComponentView {
content = formatter(name);
}
+ const inactiveColor = itemModel.get('inactiveColor');
itemGroup.add(new graphic.Text({
style: createTextStyle(textStyleModel, {
text: content,
@@ -551,9 +549,11 @@ class LegendView extends ComponentView {
function getLegendStyle(
legendModel: LegendModel['_data'][number],
+ legendLineStyle: Model<LegendLineStyleOption>,
lineVisualStyle: LineStyleProps,
itemVisualStyle: PathStyleProps,
- isColorBySeries: boolean
+ isColorBySeries: boolean,
+ isSelected: boolean
) {
let color = itemVisualStyle.fill;
if (!isColorBySeries) {
@@ -622,6 +622,13 @@ function getLegendStyle(
(itemStyle.stroke === 'auto') && (itemStyle.stroke = color);
(lineStyle.stroke === 'auto') && (lineStyle.stroke = color);
+ if (!isSelected) {
+ itemStyle.fill = legendModel.get('inactiveColor');
+ itemStyle.stroke = legendModel.get('inactiveBorderColor');
+ lineStyle.stroke = legendLineStyle.get('inactiveColor');
+ lineStyle.lineWidth = legendLineStyle.get('inactiveWidth');
+ }
+
return { itemStyle, lineStyle };
}
diff --git a/src/data/List.ts b/src/data/List.ts
index dec8228..7dd0cf4 100644
--- a/src/data/List.ts
+++ b/src/data/List.ts
@@ -46,7 +46,7 @@ import type { VisualMeta } from '../component/visualMap/VisualMapModel';
import { parseDataValue } from './helper/dataValueHelper';
import {isSourceInstance, Source} from './Source';
import OrdinalMeta from './OrdinalMeta';
-import { LegendSymbolStyleOption } from './../component/legend/LegendModel';
+import { LineStyleProps } from '../model/mixin/lineStyle';
const mathFloor = Math.floor;
const isObject = zrUtil.isObject;
@@ -141,7 +141,7 @@ export interface DefaultDataVisual {
liftZ?: number
// For legend.
legendSymbol?: string
- legendSymbolStyle?: LegendSymbolStyleOption
+ legendLineStyle?: LineStyleProps
// visualMap will inject visualMeta data
visualMeta?: VisualMeta[]
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts] 10/10: WIP(legend): fix symbolSize
Posted by ov...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch fix-legend
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit aa7f802f1d8e61898ace7348e7825b74b3524364
Author: Ovilia <zw...@gmail.com>
AuthorDate: Wed Mar 17 18:08:14 2021 +0800
WIP(legend): fix symbolSize
---
src/component/legend/LegendModel.ts | 4 +--
src/component/legend/LegendView.ts | 59 +++++++++++++++++++------------------
2 files changed, 33 insertions(+), 30 deletions(-)
diff --git a/src/component/legend/LegendModel.ts b/src/component/legend/LegendModel.ts
index 3b561d9..0ccded5 100644
--- a/src/component/legend/LegendModel.ts
+++ b/src/component/legend/LegendModel.ts
@@ -72,7 +72,7 @@ export interface LegendItemStyleOption {
shadowOffsetX?: number | 'inherit'
shadowOffsetY?: number | 'inherit'
borderColor?: ZRColor | 'inherit'
- borderWidth?: number | 'inherit'
+ borderWidth?: number | 'inherit' | 'auto'
borderType?: ZRLineType | 'inherit'
borderCap?: CanvasLineCap | 'inherit'
borderJoin?: CanvasLineJoin | 'inherit'
@@ -468,7 +468,7 @@ class LegendModel<Ops extends LegendOption = LegendOption> extends ComponentMode
shadowOffsetX: 'inherit',
shadowOffsetY: 'inherit',
borderColor: 'inherit',
- borderWidth: 'inherit',
+ borderWidth: 'auto',
borderCap: 'inherit',
borderJoin: 'inherit',
borderDashOffset: 'inherit',
diff --git a/src/component/legend/LegendView.ts b/src/component/legend/LegendView.ts
index ff643af..54b24bd 100644
--- a/src/component/legend/LegendView.ts
+++ b/src/component/legend/LegendView.ts
@@ -336,66 +336,62 @@ class LegendView extends ComponentView {
itemModel: LegendModel['_data'][number],
legendModel: LegendModel,
legendSymbolType: string,
- symbolType: string,
- symbolSize: number | number[],
+ dataSymbolType: string,
+ dataSymbolSize: number | number[],
itemAlign: LegendOption['align'],
lineVisualStyle: LineStyleProps,
itemVisualStyle: PathStyleProps,
isColorBySeries: boolean,
selectMode: LegendOption['selectedMode']
) {
- if (symbolSize != null && typeof symbolSize === 'object') {
- // Use symbol height as symbol size if it's an array
- symbolSize = symbolSize[1];
- }
-
const itemWidth = legendModel.get('itemWidth');
const itemHeight = legendModel.get('itemHeight');
const isSelected = legendModel.isSelected(name);
const symbolKeepAspect = itemModel.get('symbolKeepAspect');
+ const itemIcon = itemModel.get('icon');
+ let symbolSize;
const legendSymbolSize = itemModel.get('symbolSize');
if (legendSymbolSize === 'auto') {
- // auto: 80% itemHeight
- symbolSize = itemHeight * 0.8;
+ // auto: 80% itemHeight if has line, 100% elsewise
+ const hasHorizontalLine = !itemIcon && dataSymbolType
+ && ((dataSymbolType !== legendSymbolType) || dataSymbolType === 'none');
+ symbolSize = hasHorizontalLine
+ ? itemHeight * 0.8
+ : [itemWidth, itemHeight];
}
- else if (legendSymbolSize !== 'inherit') {
+ else if (legendSymbolSize !== 'inherit') {
// number: legend.symbolSize
- symbolSize = Math.min(legendSymbolSize, itemHeight);
+ symbolSize = legendSymbolSize;
+ }
+ else {
+ // inherit: series.symbolSize
+ symbolSize = dataSymbolSize;
}
// inherit: series.symbolSize, which is passed in by function parameter
const legendLineStyle = legendModel.getModel('lineStyle');
const style = getLegendStyle(itemModel, legendLineStyle, lineVisualStyle, itemVisualStyle, isColorBySeries, isSelected);
- symbolType = symbolType || 'roundRect';
+ dataSymbolType = dataSymbolType || 'roundRect';
const itemGroup = new Group();
const textStyleModel = itemModel.getModel('textStyle');
- const itemIcon = itemModel.get('icon');
-
-
// Use user given icon first
legendSymbolType = itemIcon || legendSymbolType;
-
- const hasHorizontalLine = !itemIcon && symbolType
- // At least show one symbol, can't be all none
- && ((symbolType !== legendSymbolType) || symbolType === 'none');
-
// Draw line
if (legendSymbolType === 'line' || itemIcon === 'line') {
itemGroup.add(
createHorizontalLine(itemWidth, itemHeight, style.lineStyle)
)
}
-
// Put symbol in the center
if (itemIcon !== 'line') {
itemGroup.add(
- createItem(symbolType, symbolSize, symbolKeepAspect, itemWidth, itemHeight, style.itemStyle)
+ createItem(dataSymbolType, symbolSize, symbolKeepAspect, itemWidth, itemHeight, style.itemStyle)
);
}
@@ -579,6 +575,10 @@ function getLegendStyle(
if (value === 'inherit') {
(itemStyle as any)[visualName] = itemVisualStyle[visualName];
}
+ else if (value === 'auto' && visualName === 'lineWidth') {
+ // If lineStyle.width is 'auto', it is set to be 2 if series has border
+ itemStyle.lineWidth = itemVisualStyle.lineWidth > 0 ? 2 : 0;
+ }
else {
(itemStyle as any)[visualName] = value;
}
@@ -652,14 +652,17 @@ function createItem(
symbolType = 'circle';
}
const size = symbolSize == null
- ? itemHeight
- : Math.min(itemHeight, symbolSize as number);
+ ? [itemHeight, itemHeight]
+ : (typeof symbolSize === 'object'
+ ? [Math.min(itemWidth, symbolSize[0]), Math.min(itemHeight, symbolSize[1])]
+ : [Math.min(itemHeight, symbolSize as number), Math.min(itemHeight, symbolSize as number)]
+ );
const symbol = createSymbol(
symbolType,
- (itemWidth - size) / 2,
- (itemHeight - size) / 2,
- size,
- size,
+ (itemWidth - size[0]) / 2,
+ (itemHeight - size[1]) / 2,
+ size[0],
+ size[1],
style.fill,
// symbolKeepAspect default true for legend
symbolKeepAspect == null ? true : symbolKeepAspect
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts] 06/10: WIP(legend): default symbolSize as 80% itemHeight
while it can also inherit
Posted by ov...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch fix-legend
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 7955fd893c95ae25ede87928afa386b1acdb4d76
Author: Ovilia <zw...@gmail.com>
AuthorDate: Tue Mar 16 16:23:50 2021 +0800
WIP(legend): default symbolSize as 80% itemHeight while it can also inherit
---
src/component/legend/LegendModel.ts | 3 +++
src/component/legend/LegendView.ts | 26 +++++++++++++++++++-------
2 files changed, 22 insertions(+), 7 deletions(-)
diff --git a/src/component/legend/LegendModel.ts b/src/component/legend/LegendModel.ts
index b595dc1..c9997cd 100644
--- a/src/component/legend/LegendModel.ts
+++ b/src/component/legend/LegendModel.ts
@@ -123,6 +123,8 @@ export interface LegendStyleOption {
textStyle?: LabelOption
symbolKeepAspect?: boolean
+
+ symbolSize?: number | 'auto' | 'inherit'
}
interface DataItem extends LegendStyleOption {
@@ -449,6 +451,7 @@ class LegendModel<Ops extends LegendOption = LegendOption> extends ComponentMode
itemGap: 10,
itemWidth: 25,
itemHeight: 14,
+ symbolSize: 'auto',
inactiveColor: '#ccc',
diff --git a/src/component/legend/LegendView.ts b/src/component/legend/LegendView.ts
index 7449414..6f37e72 100644
--- a/src/component/legend/LegendView.ts
+++ b/src/component/legend/LegendView.ts
@@ -184,9 +184,8 @@ class LegendView extends ComponentView {
!seriesModel.get('legendHoverLink') && excludeSeriesId.push(seriesModel.id);
});
- each(legendModel.getData(), function (itemModel, dataIndex) {
- const name = itemModel.get('name');
- const legendItemStyle = itemModel.getModel('itemStyle').getItemStyle();
+ each(legendModel.getData(), function (legendItemModel, dataIndex) {
+ const name = legendItemModel.get('name');
// Use empty string or \n as a newline string
if (!this.newlineDisabled && (name === '' || name === '\n')) {
@@ -221,10 +220,13 @@ class LegendView extends ComponentView {
// Using rect symbol defaultly
const legendSymbolType = data.getVisual('legendSymbol') || 'roundRect';
const symbolType = data.getVisual('symbol');
- const symbolSize = seriesModel.get('symbolSize');
+ const symbolSize = data.getVisual('symbolSize');
+
+ data.getVisual('symbolSize');
+ console.log(symbolSize)
const itemGroup = this._createItem(
- name, dataIndex, itemModel, legendModel,
+ name, dataIndex, legendItemModel, legendModel,
legendSymbolType, symbolType, symbolSize,
itemAlign,
lineVisualStyle, style, true, selectMode
@@ -257,7 +259,7 @@ class LegendView extends ComponentView {
const legendSymbolType = 'roundRect';
const itemGroup = this._createItem(
- name, dataIndex, itemModel, legendModel,
+ name, dataIndex, legendItemModel, legendModel,
legendSymbolType, null, null,
itemAlign,
{}, style, false, selectMode
@@ -358,8 +360,18 @@ class LegendView extends ComponentView {
const inactiveBorderColor = itemModel.get('inactiveBorderColor');
const symbolKeepAspect = itemModel.get('symbolKeepAspect');
+ const legendSymbolSize = itemModel.get('symbolSize');
+ if (legendSymbolSize === 'auto') {
+ // auto: 80% itemHeight
+ symbolSize = itemHeight * 0.8;
+ }
+ else if (legendSymbolSize !== 'inherit') {
+ // number: legend.symbolSize
+ symbolSize = Math.min(legendSymbolSize, itemHeight);
+ }
+ // inherit: series.symbolSize, which is passed in by function parameter
+
const style = getLegendStyle(itemModel, lineVisualStyle, itemVisualStyle, isColorBySeries);
- console.log(style)
symbolType = symbolType || 'roundRect';
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts] 09/10: Merge branch 'master' into fix-legend
Posted by ov...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch fix-legend
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 635d986b92e722841b77eb0ad41d7824335a7306
Merge: a654399 88d2ad7
Author: Ovilia <zw...@gmail.com>
AuthorDate: Wed Mar 17 15:55:08 2021 +0800
Merge branch 'master' into fix-legend
LICENSE | 9 +-
src/chart/sankey/SankeyView.ts | 3 +-
src/component/axis/AxisBuilder.ts | 34 +--
src/component/brush/BrushModel.ts | 5 +
src/component/dataZoom/SliderZoomView.ts | 5 +-
src/component/graphic/install.ts | 16 +-
src/component/legend/LegendView.ts | 26 +-
src/component/toolbox/ToolboxModel.ts | 3 +-
src/component/toolbox/ToolboxView.ts | 28 +-
src/component/tooltip/TooltipView.ts | 154 ++++++++--
src/i18n/langCS.ts | 142 ++++++++++
src/model/Series.ts | 4 +-
src/util/format.ts | 2 +-
src/util/graphic.ts | 56 +++-
src/util/innerStore.ts | 17 +-
src/util/model.ts | 68 +++--
src/util/types.ts | 28 +-
test/line-non-continuous.html | 75 +++++
test/runTest/actions/__meta__.json | 1 +
test/tooltip-component.html | 467 +++++++++++++++++++++++++++++++
20 files changed, 1009 insertions(+), 134 deletions(-)
diff --cc src/component/legend/LegendView.ts
index c4374fe,694e132..ff643af
--- a/src/component/legend/LegendView.ts
+++ b/src/component/legend/LegendView.ts
@@@ -33,13 -33,8 +33,12 @@@ import
ZRColor,
ItemStyleOption,
ZRRectLike,
- ECElement,
CommonTooltipOption,
- ColorString
+ ColorString,
+ SeriesOption,
+ SymbolOptionMixin,
+ LineStyleOption,
+ DecalObject
} from '../../util/types';
import Model from '../../model/Model';
import Displayable, { DisplayableState } from 'zrender/src/graphic/Displayable';
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts] 08/10: test(legend): update test cases
Posted by ov...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch fix-legend
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit a654399b65aec562b316f2f8d068c904843022d0
Author: Ovilia <zw...@gmail.com>
AuthorDate: Wed Mar 17 15:54:21 2021 +0800
test(legend): update test cases
---
test/legend-style.html | 113 +++++++++++++++++++++++++++++++++++--------------
1 file changed, 82 insertions(+), 31 deletions(-)
diff --git a/test/legend-style.html b/test/legend-style.html
index 70bd350..7c84811 100644
--- a/test/legend-style.html
+++ b/test/legend-style.html
@@ -35,17 +35,20 @@ under the License.
<div id="main1"></div>
+ <div id="main2"></div>
<script>
- require(['echarts'], function (echarts) {
- var getData = function (seriesId) {
+ function getData(seriesId) {
var data = [];
for (var i = 0; i < 7; ++i) {
data.push(Math.random() * 100 + (seriesId + 1) * 200);
}
return data;
- };
+ }
+ </script>
+ <script>
+ require(['echarts'], function (echarts) {
var option = {
xAxis: {
type: 'category',
@@ -54,48 +57,85 @@ under the License.
yAxis: {
type: 'value'
},
- legend: {
- data: ['Default Line', 'Line with emptyCircle', 'Line with emptyCircle and color', 'Line with style', 'Line with visualMap', 'Pie A', 'Pie B', 'Pie C']
- },
+ legend: [{
+ data: [
+ 'Line A',
+ 'Line B',
+ {
+ name: 'Pie A',
+ itemStyle: {
+ // borderWidth:
+ }
+ },
+ 'Pie B', 'Pie C',
+ {
+ name: 'Line C',
+ symbolSize: 'inherit'
+ }, 'Line F'
+ ]
+ }, {
+ bottom: 10,
+ data: [{
+ name: 'Line D'
+ }, {
+ name: 'Line E',
+ itemStyle: {
+ color: 'yellow'
+ }
+ }],
+ itemStyle: {
+ color: 'orange'
+ }
+ }],
series: [{
data: getData(0),
type: 'line',
- name: 'Default Line'
+ name: 'Line A'
}, {
data: getData(1),
type: 'line',
- name: 'Line with emptyCircle',
- symbol: 'emptyCircle'
+ name: 'Line B',
+ itemStyle: {
+ color: 'red',
+ borderWidth: 5
+ },
+ symbolSize: 10
}, {
data: getData(2),
type: 'line',
- name: 'Line with emptyCircle and color',
- symbol: 'emptyCircle',
+ name: 'Line C',
+ lineStyle: {
+ color: 'green',
+ width: 5,
+ shadowBlur: 10,
+ shadowColor: 'orange'
+ },
itemStyle: {
- color: 'auto'
- }
+ color: 'red'
+ },
+ symbolSize: 30
}, {
data: getData(3),
type: 'line',
- name: 'Line with style',
- symbolSize: 12,
+ name: 'Line D',
itemStyle: {
- color: 'auto',
- borderColor: 'blue',
- borderWidth: 2,
- symbolSize: 25
- },
- lineStyle: {
- color: 'red',
- width: 4
+ color: 'blue'
}
}, {
data: getData(4),
type: 'line',
- name: 'Line with visualMap',
- symbolSize: 30,
+ name: 'Line E',
+ itemStyle: {
+ color: 'green'
+ },
+ symbolSize: 10
+ }, {
+ data: getData(5),
+ type: 'line',
+ name: 'Line F',
+ symbolSize: 10,
itemStyle: {
- borderColor: 'green'
+ color: 'blue'
}
}, {
type: 'pie',
@@ -112,6 +152,10 @@ under the License.
color: 'blue'
}
}],
+ itemStyle: {
+ borderWidth: 5,
+ borderColor: '#fff'
+ },
center: ['80%', '50%']
}],
grid: {
@@ -120,19 +164,26 @@ under the License.
},
visualMap: {
type: 'continuous',
- min: 1000,
- max: 1100,
+ min: 1200,
+ max: 1300,
inRange: {
color: ['green', 'yellow', 'red']
},
show: false,
- seriesIndex: 4
- }
+ seriesIndex: 5
+ },
+ animation: 0
};
var chart = testHelper.create(echarts, 'main1', {
title: [
- 'Legend icon being more intuitive'
+ '**Legend icon being more intuitive**',
+ 'Line A: the style of the line and items should be the same in those in legend; all colored in the first theme color',
+ 'Line B: the style of the line and items should be the same in those in legend; all colored in red',
+ 'Line C: the style of the line and items should be the same in those in legend; items colored in red and line colored in green',
+ 'Line D: the style of the line should be the same in that in the legend; items colored orange in legend and blue in series',
+ 'Line E: the style of the line should be the same in that in the legend; items colored yellow in legend and green in series',
+ 'Line F: the colors in the legend should be blue'
],
option: option
});
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts] 04/10: WIP(legend): use default style in series
Posted by ov...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch fix-legend
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit bf2529e70ae7730a5d6b32898452749d4499d7f2
Author: Ovilia <zw...@gmail.com>
AuthorDate: Tue Mar 9 13:27:08 2021 +0800
WIP(legend): use default style in series
---
src/chart/line/LineSeries.ts | 2 +-
src/chart/line/install.ts | 3 +-
src/component/legend/LegendView.ts | 117 ++++++++++++++++---------------------
src/data/List.ts | 2 +-
4 files changed, 52 insertions(+), 72 deletions(-)
diff --git a/src/chart/line/LineSeries.ts b/src/chart/line/LineSeries.ts
index 5e969d9..5c9006d 100644
--- a/src/chart/line/LineSeries.ts
+++ b/src/chart/line/LineSeries.ts
@@ -153,7 +153,7 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> {
itemStyle: {
color: 'auto',
- borderWidth: 1
+ borderWidth: 2
},
endLabel: {
diff --git a/src/chart/line/install.ts b/src/chart/line/install.ts
index 71d38ac..35147e2 100644
--- a/src/chart/line/install.ts
+++ b/src/chart/line/install.ts
@@ -43,9 +43,8 @@ export function install(registers: EChartsExtensionInstallRegisters) {
const itemStyle = seriesModel.getModel('itemStyle');
const color = itemStyle ? itemStyle.get('color') : null;
const borderColor = itemStyle ? itemStyle.get('borderColor') : null;//TODO
- const lineColor = lineStyle && lineStyle.get('color') || color;
+ let lineColor = lineStyle && lineStyle.get('color') || color;
- console.log(color, borderColor)
if (lineStyle) {
seriesModel.getData().setVisual('legendSymbolStyle', {
borderColor,
diff --git a/src/component/legend/LegendView.ts b/src/component/legend/LegendView.ts
index 9627355..1fc9abf 100644
--- a/src/component/legend/LegendView.ts
+++ b/src/component/legend/LegendView.ts
@@ -203,6 +203,7 @@ class LegendView extends ComponentView {
if (seriesModel) {
const data = seriesModel.getData();
const legendSymbolStyle = data.getVisual('legendSymbolStyle') || {};
+
/**
* `data.getVisual('style')` may be the color from the register
* in series. For example, for line series,
@@ -216,16 +217,12 @@ class LegendView extends ComponentView {
const legendSymbolType = data.getVisual('legendSymbol') || 'roundRect';
const symbolType = data.getVisual('symbol');
const symbolSize = seriesModel.get('symbolSize');
- const color = style.fill;
- const borderColor = style[symbolType.indexOf('empty') > -1 ? 'fill' : 'stroke'];
- const borderWidth = style.lineWidth;
- const decal = style.decal;
const itemGroup = this._createItem(
- dataIndex, itemModel, legendModel,
+ name, dataIndex, itemModel, legendModel,
legendSymbolType, symbolType, symbolSize,
- itemAlign, color, borderColor, borderWidth,
- legendSymbolStyle, decal, selectMode
+ itemAlign,
+ legendSymbolStyle, style, true, selectMode
);
itemGroup.on('click', curry(dispatchSelectAction, name, null, api, excludeSeriesId))
@@ -252,30 +249,13 @@ class LegendView extends ComponentView {
const idx = provider.indexOfName(name);
const style = provider.getItemVisual(idx, 'style') as PathStyleProps;
- const symbolType = provider.getItemVisual(idx, 'symbolType');
- console.log(symbolType)
- // TODO:
- // const borderColor = style[symbolType.indexOf('empty') > -1 ? 'fill' : 'stroke'];
- const borderColor = style.stroke;
- const borderWidth = style.lineWidth;
- const decal = style.decal;
- let color = style.fill;
- const colorArr = parse(style.fill as ColorString);
- // Color may be set to transparent in visualMap when data is out of range.
- // Do not show nothing.
- if (colorArr && colorArr[3] === 0) {
- colorArr[3] = 0.2;
- // TODO color is set to 0, 0, 0, 0. Should show correct RGBA
- color = stringify(colorArr, 'rgba');
- }
-
const legendSymbolType = 'roundRect';
const itemGroup = this._createItem(
- dataIndex, itemModel, legendModel,
+ name, dataIndex, itemModel, legendModel,
legendSymbolType, null, null,
- itemAlign, color, borderColor, borderWidth,
- {}, decal, selectMode
+ itemAlign,
+ {}, style, false, selectMode
);
// FIXME: consider different series has items with the same name.
@@ -347,6 +327,7 @@ class LegendView extends ComponentView {
}
private _createItem(
+ name: string,
dataIndex: number,
itemModel: LegendModel['_data'][number],
legendModel: LegendModel,
@@ -354,11 +335,9 @@ class LegendView extends ComponentView {
symbolType: string,
symbolSize: number | number[],
itemAlign: LegendOption['align'],
- color: ZRColor,
- borderColor: ZRColor,
- borderWidth: number,
legendSymbolStyle: LegendSymbolStyleOption,
- decal: PatternObject,
+ dataItemStyle: PathStyleProps,
+ isColorBySeries: boolean,
selectMode: LegendOption['selectedMode']
) {
if (symbolSize != null && typeof symbolSize === 'object') {
@@ -368,7 +347,6 @@ class LegendView extends ComponentView {
const itemWidth = legendModel.get('itemWidth');
const itemHeight = legendModel.get('itemHeight');
- const name = itemModel.get('name');
const isSelected = legendModel.isSelected(name);
const inactiveColor = itemModel.get('inactiveColor');
@@ -376,6 +354,23 @@ class LegendView extends ComponentView {
const symbolKeepAspect = itemModel.get('symbolKeepAspect');
const legendModelItemStyle = itemModel.getModel('itemStyle');
+ let color = dataItemStyle.fill;
+ if (!isColorBySeries) {
+ const colorArr = parse(color as ColorString);
+ // Color may be set to transparent in visualMap when data is out of range.
+ // Do not show nothing.
+ if (colorArr && colorArr[3] === 0) {
+ colorArr[3] = 0.2;
+ // TODO color is set to 0, 0, 0, 0. Should show correct RGBA
+ color = stringify(colorArr, 'rgba');
+ }
+ }
+
+ symbolType = symbolType || 'roundRect';
+ const borderColor = dataItemStyle[symbolType.indexOf('empty') > -1 ? 'fill' : 'stroke'];
+ const borderWidth = dataItemStyle.lineWidth;
+ const decal = dataItemStyle.decal;
+
const itemGroup = new Group();
const textStyleModel = itemModel.getModel('textStyle');
@@ -392,27 +387,32 @@ class LegendView extends ComponentView {
// At least show one symbol, can't be all none
&& ((symbolType !== legendSymbolType) || symbolType === 'none');
+ // Draw line if hasHorizontalLine, else draw symbol
+ let legendBorderColor = isSelected
+ ? (hasHorizontalLine
+ ? legendSymbolStyle.horizontalLineColor
+ : borderColor
+ )
+ : inactiveBorderColor;
+ legendBorderColor = legendBorderColor === 'auto'
+ ? color : legendBorderColor;
+ const legendBorderWidth = hasHorizontalLine
+ ? (legendSymbolStyle.horizontalLineWidth == null
+ ? borderWidth
+ : legendSymbolStyle.horizontalLineWidth)
+ : borderWidth;
const legendSymbol = createSymbol(
legendSymbolType,
0,
0,
itemWidth,
itemHeight,
- isSelected ? (hasHorizontalLine ? 'none' : color) : inactiveColor,
+ legendBorderColor,
// symbolKeepAspect default true for legend
symbolKeepAspect == null ? true : symbolKeepAspect
);
- // Draw line if hasHorizontalLine, else draw symbol
- const legendBorderColor = hasHorizontalLine ? legendSymbolStyle.horizontalLineColor : borderColor;
- const legendBorderWidth = hasHorizontalLine
- ? (legendSymbolStyle.horizontalLineWidth == null ? borderWidth : legendSymbolStyle.horizontalLineWidth)
- : borderWidth;
itemGroup.add(
- setSymbolStyle(
- legendSymbol, legendSymbolType, legendModelItemStyle,
- legendBorderColor, legendBorderWidth,
- inactiveBorderColor, decal, isSelected
- )
+ setSymbolStyle(legendSymbol, legendSymbolType, null, legendBorderWidth, decal)
);
// Draw symbol if hasHorizontalLine
@@ -435,10 +435,7 @@ class LegendView extends ComponentView {
);
// Put symbol in the center
itemGroup.add(
- setSymbolStyle(
- legendSymbolCenter, symbolType, legendModelItemStyle,
- borderColor, borderWidth, inactiveBorderColor, decal, isSelected
- )
+ setSymbolStyle(legendSymbolCenter, symbolType, borderColor, borderWidth, decal)
);
}
@@ -589,35 +586,19 @@ class LegendView extends ComponentView {
function setSymbolStyle(
symbol: graphic.Path | graphic.Image,
symbolType: string,
- legendModelItemStyle: Model<ItemStyleOption>,
borderColor: ZRColor,
borderWidth: number,
- inactiveBorderColor: ZRColor,
- decal: PatternObject,
- isSelected: boolean
+ decal: PatternObject
) {
- const itemStyle = legendModelItemStyle.getItemStyle([
- 'color', 'borderColor', 'shadowBlur', 'shadowColor', 'shadowOffsetX', 'shadowOffsetY'
- ]);
- (symbol as Displayable).setStyle(itemStyle);
-
const style = (symbol as graphic.Path).style;
- let color = style.fill;
- if (symbolType === 'line' || symbolType.indexOf('empty') > -1) {
- // Use color as borderColor
- borderColor = isSelected
- ? legendModelItemStyle.get('color') || color
- : inactiveBorderColor;
- // color = 'none';
+ if (symbolType === 'line') {
+ style.stroke = style.fill;
+ style.fill = 'none';
}
else {
style.decal = decal;
- borderColor = isSelected
- ? legendModelItemStyle.get('borderColor') || borderColor
- : inactiveBorderColor;
+ borderColor && (style.stroke = borderColor);
}
- style.fill = color;
- style.stroke = borderColor;
style.lineWidth = borderWidth;
return symbol;
}
diff --git a/src/data/List.ts b/src/data/List.ts
index 951c463..dec8228 100644
--- a/src/data/List.ts
+++ b/src/data/List.ts
@@ -36,7 +36,7 @@ import {
DimensionIndex, DimensionName, DimensionLoose, OptionDataItem,
ParsedValue, ParsedValueNumeric, OrdinalNumber, DimensionUserOuput,
ModelOption, SeriesDataType, OptionSourceData, SOURCE_FORMAT_TYPED_ARRAY, SOURCE_FORMAT_ORIGINAL,
- DecalObject,
+ DecalObject
} from '../util/types';
import {isDataItemOption, convertOptionIdName} from '../util/model';
import { getECData } from '../util/innerStore';
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts] 03/10: WIP(legend): reserve emptyCircle
Posted by ov...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch fix-legend
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 402f8f5627eba19d58ed5cccd21573d6f4aa1c7c
Author: Ovilia <zw...@gmail.com>
AuthorDate: Mon Mar 8 14:03:50 2021 +0800
WIP(legend): reserve emptyCircle
---
src/chart/line/LineSeries.ts | 7 ++--
src/chart/line/install.ts | 12 +++++--
src/component/legend/LegendModel.ts | 8 ++++-
src/component/legend/LegendView.ts | 68 ++++++++++++++++++++++++++-----------
src/data/List.ts | 5 +--
src/util/symbol.ts | 5 +--
src/util/types.ts | 2 +-
7 files changed, 71 insertions(+), 36 deletions(-)
diff --git a/src/chart/line/LineSeries.ts b/src/chart/line/LineSeries.ts
index 1876ab0..5e969d9 100644
--- a/src/chart/line/LineSeries.ts
+++ b/src/chart/line/LineSeries.ts
@@ -127,8 +127,6 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> {
hasSymbolVisual = true;
legendSymbol = 'line';
- visualDrawType = 'stroke' as const;
-
getInitialData(option: LineSeriesOption): List {
if (__DEV__) {
const coordSys = option.coordinateSystem;
@@ -154,8 +152,7 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> {
},
itemStyle: {
- color: 'white',
- borderColor: 'auto',
+ color: 'auto',
borderWidth: 1
},
@@ -189,7 +186,7 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> {
// Disabled if step is true
smooth: false,
smoothMonotone: null,
- symbol: 'circle',
+ symbol: 'emptyCircle',
symbolSize: 4,
symbolRotate: null,
diff --git a/src/chart/line/install.ts b/src/chart/line/install.ts
index 4738554..71d38ac 100644
--- a/src/chart/line/install.ts
+++ b/src/chart/line/install.ts
@@ -40,11 +40,17 @@ export function install(registers: EChartsExtensionInstallRegisters) {
reset: function (seriesModel: LineSeriesModel) {
// Visual coding for legend
const lineStyle = seriesModel.getModel('lineStyle');
- console.log(lineStyle.get('color'), lineStyle.get('width'))
+ const itemStyle = seriesModel.getModel('itemStyle');
+ const color = itemStyle ? itemStyle.get('color') : null;
+ const borderColor = itemStyle ? itemStyle.get('borderColor') : null;//TODO
+ const lineColor = lineStyle && lineStyle.get('color') || color;
+
+ console.log(color, borderColor)
if (lineStyle) {
seriesModel.getData().setVisual('legendSymbolStyle', {
- color: lineStyle.get('color'),
- borderWidth: lineStyle.get('width')
+ borderColor,
+ horizontalLineColor: lineColor,
+ horizontalLineWidth: lineStyle.get('width')
});
}
}
diff --git a/src/component/legend/LegendModel.ts b/src/component/legend/LegendModel.ts
index afa39d4..e603ce2 100644
--- a/src/component/legend/LegendModel.ts
+++ b/src/component/legend/LegendModel.ts
@@ -29,7 +29,8 @@ import {
ItemStyleOption,
LabelOption,
LayoutOrient,
- CommonTooltipOption
+ CommonTooltipOption,
+ ZRColor
} from '../../util/types';
import { Dictionary } from 'zrender/src/core/types';
import GlobalModel from '../../model/Global';
@@ -103,6 +104,11 @@ export interface LegendTooltipFormatterParams {
$vars: ['name']
}
+export interface LegendSymbolStyleOption extends ItemStyleOption {
+ horizontalLineColor?: ZRColor,
+ horizontalLineWidth?: number
+}
+
export interface LegendOption extends ComponentOption, LegendStyleOption,
BoxLayoutOptionMixin, BorderOptionMixin
{
diff --git a/src/component/legend/LegendView.ts b/src/component/legend/LegendView.ts
index a1cab95..9627355 100644
--- a/src/component/legend/LegendView.ts
+++ b/src/component/legend/LegendView.ts
@@ -25,7 +25,7 @@ import {setLabelStyle, createTextStyle} from '../../label/labelStyle';
import {makeBackground} from '../helper/listComponent';
import * as layoutUtil from '../../util/layout';
import ComponentView from '../../view/Component';
-import LegendModel, { LegendOption, LegendSelectorButtonOption, LegendTooltipFormatterParams } from './LegendModel';
+import LegendModel, { LegendOption, LegendSelectorButtonOption, LegendSymbolStyleOption, LegendTooltipFormatterParams } from './LegendModel';
import GlobalModel from '../../model/Global';
import ExtensionAPI from '../../core/ExtensionAPI';
import {
@@ -203,22 +203,26 @@ class LegendView extends ComponentView {
if (seriesModel) {
const data = seriesModel.getData();
const legendSymbolStyle = data.getVisual('legendSymbolStyle') || {};
+ /**
+ * `data.getVisual('style')` may be the color from the register
+ * in series. For example, for line series,
+ */
const style = zrUtil.extend(
zrUtil.extend({}, data.getVisual('style')),
legendItemStyle
);
- const color = style.fill;
- const borderColor = style.stroke;
- const borderWidth = style.lineWidth;
- const decal = style.decal;
// Using rect symbol defaultly
const legendSymbolType = data.getVisual('legendSymbol') || 'roundRect';
const symbolType = data.getVisual('symbol');
const symbolSize = seriesModel.get('symbolSize');
+ const color = style.fill;
+ const borderColor = style[symbolType.indexOf('empty') > -1 ? 'fill' : 'stroke'];
+ const borderWidth = style.lineWidth;
+ const decal = style.decal;
const itemGroup = this._createItem(
- name, dataIndex, itemModel, legendModel,
+ dataIndex, itemModel, legendModel,
legendSymbolType, symbolType, symbolSize,
itemAlign, color, borderColor, borderWidth,
legendSymbolStyle, decal, selectMode
@@ -248,6 +252,10 @@ class LegendView extends ComponentView {
const idx = provider.indexOfName(name);
const style = provider.getItemVisual(idx, 'style') as PathStyleProps;
+ const symbolType = provider.getItemVisual(idx, 'symbolType');
+ console.log(symbolType)
+ // TODO:
+ // const borderColor = style[symbolType.indexOf('empty') > -1 ? 'fill' : 'stroke'];
const borderColor = style.stroke;
const borderWidth = style.lineWidth;
const decal = style.decal;
@@ -264,7 +272,7 @@ class LegendView extends ComponentView {
const legendSymbolType = 'roundRect';
const itemGroup = this._createItem(
- name, dataIndex, itemModel, legendModel,
+ dataIndex, itemModel, legendModel,
legendSymbolType, null, null,
itemAlign, color, borderColor, borderWidth,
{}, decal, selectMode
@@ -339,7 +347,6 @@ class LegendView extends ComponentView {
}
private _createItem(
- name: string,
dataIndex: number,
itemModel: LegendModel['_data'][number],
legendModel: LegendModel,
@@ -350,7 +357,7 @@ class LegendView extends ComponentView {
color: ZRColor,
borderColor: ZRColor,
borderWidth: number,
- legendSymbolStyle: ItemStyleOption,
+ legendSymbolStyle: LegendSymbolStyleOption,
decal: PatternObject,
selectMode: LegendOption['selectedMode']
) {
@@ -361,6 +368,7 @@ class LegendView extends ComponentView {
const itemWidth = legendModel.get('itemWidth');
const itemHeight = legendModel.get('itemHeight');
+ const name = itemModel.get('name');
const isSelected = legendModel.isSelected(name);
const inactiveColor = itemModel.get('inactiveColor');
@@ -379,30 +387,36 @@ class LegendView extends ComponentView {
// Use user given icon first
legendSymbolType = itemIcon || legendSymbolType;
+
+ const hasHorizontalLine = !itemIcon && symbolType
+ // At least show one symbol, can't be all none
+ && ((symbolType !== legendSymbolType) || symbolType === 'none');
+
const legendSymbol = createSymbol(
legendSymbolType,
0,
0,
itemWidth,
itemHeight,
- isSelected ? color : inactiveColor,
+ isSelected ? (hasHorizontalLine ? 'none' : color) : inactiveColor,
// symbolKeepAspect default true for legend
symbolKeepAspect == null ? true : symbolKeepAspect
);
+ // Draw line if hasHorizontalLine, else draw symbol
+ const legendBorderColor = hasHorizontalLine ? legendSymbolStyle.horizontalLineColor : borderColor;
+ const legendBorderWidth = hasHorizontalLine
+ ? (legendSymbolStyle.horizontalLineWidth == null ? borderWidth : legendSymbolStyle.horizontalLineWidth)
+ : borderWidth;
itemGroup.add(
setSymbolStyle(
legendSymbol, legendSymbolType, legendModelItemStyle,
- legendSymbolStyle.color || borderColor, legendSymbolStyle.borderWidth || borderWidth,
+ legendBorderColor, legendBorderWidth,
inactiveBorderColor, decal, isSelected
)
);
- // Compose symbols
- // PENDING
- if (!itemIcon && symbolType
- // At least show one symbol, can't be all none
- && ((symbolType !== legendSymbolType) || symbolType === 'none')
- ) {
+ // Draw symbol if hasHorizontalLine
+ if (hasHorizontalLine) {
const size = symbolSize == null
? itemHeight * 0.8
: Math.min(itemHeight, symbolSize as number);
@@ -582,14 +596,28 @@ function setSymbolStyle(
decal: PatternObject,
isSelected: boolean
) {
- const itemStyle = legendModelItemStyle.getItemStyle();
+ const itemStyle = legendModelItemStyle.getItemStyle([
+ 'color', 'borderColor', 'shadowBlur', 'shadowColor', 'shadowOffsetX', 'shadowOffsetY'
+ ]);
(symbol as Displayable).setStyle(itemStyle);
const style = (symbol as graphic.Path).style;
- if (symbolType.indexOf('empty') < 0) {
+ let color = style.fill;
+ if (symbolType === 'line' || symbolType.indexOf('empty') > -1) {
+ // Use color as borderColor
+ borderColor = isSelected
+ ? legendModelItemStyle.get('color') || color
+ : inactiveBorderColor;
+ // color = 'none';
+ }
+ else {
style.decal = decal;
+ borderColor = isSelected
+ ? legendModelItemStyle.get('borderColor') || borderColor
+ : inactiveBorderColor;
}
- style.stroke = isSelected ? borderColor: inactiveBorderColor;
+ style.fill = color;
+ style.stroke = borderColor;
style.lineWidth = borderWidth;
return symbol;
}
diff --git a/src/data/List.ts b/src/data/List.ts
index 72f79dc..951c463 100644
--- a/src/data/List.ts
+++ b/src/data/List.ts
@@ -36,7 +36,7 @@ import {
DimensionIndex, DimensionName, DimensionLoose, OptionDataItem,
ParsedValue, ParsedValueNumeric, OrdinalNumber, DimensionUserOuput,
ModelOption, SeriesDataType, OptionSourceData, SOURCE_FORMAT_TYPED_ARRAY, SOURCE_FORMAT_ORIGINAL,
- DecalObject, ItemStyleOption
+ DecalObject,
} from '../util/types';
import {isDataItemOption, convertOptionIdName} from '../util/model';
import { getECData } from '../util/innerStore';
@@ -46,6 +46,7 @@ import type { VisualMeta } from '../component/visualMap/VisualMapModel';
import { parseDataValue } from './helper/dataValueHelper';
import {isSourceInstance, Source} from './Source';
import OrdinalMeta from './OrdinalMeta';
+import { LegendSymbolStyleOption } from './../component/legend/LegendModel';
const mathFloor = Math.floor;
const isObject = zrUtil.isObject;
@@ -140,7 +141,7 @@ export interface DefaultDataVisual {
liftZ?: number
// For legend.
legendSymbol?: string
- legendSymbolStyle?: ItemStyleOption
+ legendSymbolStyle?: LegendSymbolStyleOption
// visualMap will inject visualMeta data
visualMeta?: VisualMeta[]
diff --git a/src/util/symbol.ts b/src/util/symbol.ts
index c30cf76..8ec49ad 100644
--- a/src/util/symbol.ts
+++ b/src/util/symbol.ts
@@ -337,10 +337,7 @@ export function createSymbol(
const isEmpty = symbolType.indexOf('empty') === 0;
if (isEmpty) {
- const realSymbolType = symbolType.substr(5, 1).toLowerCase() + symbolType.substr(6);
- console.warn(`[DEPRECATED] Shape "${symbolType}" is deprecated. `
- + `Please use "${realSymbolType}" with "fill" as "white" instead.`);
- symbolType = realSymbolType;
+ symbolType = symbolType.substr(5, 1).toLowerCase() + symbolType.substr(6);
}
let symbolPath: ECSymbol | graphic.Image;
diff --git a/src/util/types.ts b/src/util/types.ts
index 823310c..a8459a9 100644
--- a/src/util/types.ts
+++ b/src/util/types.ts
@@ -835,7 +835,7 @@ export interface ShadowOptionMixin {
}
export interface BorderOptionMixin {
- borderColor?: string
+ borderColor?: ZRColor
borderWidth?: number
borderType?: ZRLineType
borderCap?: CanvasLineCap
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts] 02/10: feat(legend): line series default legend and
customed style
Posted by ov...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch fix-legend
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 1c93de638d8cbd5ddedd21059d99b831033a931f
Author: Ovilia <zw...@gmail.com>
AuthorDate: Thu Mar 4 12:26:46 2021 +0800
feat(legend): line series default legend and customed style
---
src/component/legend/LegendModel.ts | 59 +++++++++++++++++++++----------------
src/component/legend/LegendView.ts | 42 +++++++++++++-------------
src/export/option.ts | 12 ++++++--
src/util/symbol.ts | 3 +-
4 files changed, 64 insertions(+), 52 deletions(-)
diff --git a/src/component/legend/LegendModel.ts b/src/component/legend/LegendModel.ts
index 074cb4e..afa39d4 100644
--- a/src/component/legend/LegendModel.ts
+++ b/src/component/legend/LegendModel.ts
@@ -59,7 +59,35 @@ export interface LegendSelectorButtonOption {
title?: string
}
-interface DataItem {
+export interface LegendStyleOption {
+ /**
+ * Icon of the legend items.
+ * @default 'roundRect'
+ */
+ icon?: string
+
+ /**
+ * Color when legend item is not selected
+ */
+ inactiveColor?: ColorString
+ /**
+ * Border color when legend item is not selected
+ */
+ inactiveBorderColor?: ColorString
+
+ /**
+ * Legend label formatter
+ */
+ formatter?: string | ((name: string) => string)
+
+ itemStyle?: ItemStyleOption
+
+ textStyle?: LabelOption
+
+ symbolKeepAspect?: boolean
+}
+
+interface DataItem extends LegendStyleOption {
name?: string
icon?: string
textStyle?: LabelOption
@@ -74,7 +102,10 @@ export interface LegendTooltipFormatterParams {
name: string
$vars: ['name']
}
-export interface LegendOption extends ComponentOption, BoxLayoutOptionMixin, BorderOptionMixin {
+
+export interface LegendOption extends ComponentOption, LegendStyleOption,
+ BoxLayoutOptionMixin, BorderOptionMixin
+{
mainType?: 'legend'
@@ -98,11 +129,6 @@ export interface LegendOption extends ComponentOption, BoxLayoutOptionMixin, Bor
*/
padding?: number | number[]
/**
- * Icon of the legend items.
- * @default 'roundRect'
- */
- icon?: string
- /**
* Gap between each legend item.
* @default 10
*/
@@ -115,23 +141,6 @@ export interface LegendOption extends ComponentOption, BoxLayoutOptionMixin, Bor
* Height of legend symbol
*/
itemHeight?: number
- /**
- * Color when legend item is not selected
- */
- inactiveColor?: ColorString
- /**
- * Border color when legend item is not selected
- */
- inactiveBorderColor?: ColorString
-
- itemStyle?: ItemStyleOption
-
- /**
- * Legend label formatter
- */
- formatter?: string | ((name: string) => string)
-
- textStyle?: LabelOption
selectedMode?: boolean | 'single' | 'multiple'
/**
@@ -169,8 +178,6 @@ export interface LegendOption extends ComponentOption, BoxLayoutOptionMixin, Bor
data?: (string | DataItem)[]
- symbolKeepAspect?: boolean
-
/**
* Tooltip option
*/
diff --git a/src/component/legend/LegendView.ts b/src/component/legend/LegendView.ts
index b170572..a1cab95 100644
--- a/src/component/legend/LegendView.ts
+++ b/src/component/legend/LegendView.ts
@@ -179,6 +179,7 @@ class LegendView extends ComponentView {
each(legendModel.getData(), function (itemModel, dataIndex) {
const name = itemModel.get('name');
+ const legendItemStyle = itemModel.getModel('itemStyle').getItemStyle();
// Use empty string or \n as a newline string
if (!this.newlineDisabled && (name === '' || name === '\n')) {
@@ -201,15 +202,18 @@ class LegendView extends ComponentView {
// Legend to control series.
if (seriesModel) {
const data = seriesModel.getData();
- const style = data.getVisual('style');
- const color = style[data.getVisual('drawType')] || style.fill;
+ const legendSymbolStyle = data.getVisual('legendSymbolStyle') || {};
+ const style = zrUtil.extend(
+ zrUtil.extend({}, data.getVisual('style')),
+ legendItemStyle
+ );
+ const color = style.fill;
const borderColor = style.stroke;
const borderWidth = style.lineWidth;
const decal = style.decal;
// Using rect symbol defaultly
const legendSymbolType = data.getVisual('legendSymbol') || 'roundRect';
- const legendSymbolStyle = data.getVisual('legendSymbolStyle') || {};
const symbolType = data.getVisual('symbol');
const symbolSize = seriesModel.get('symbolSize');
@@ -357,12 +361,13 @@ class LegendView extends ComponentView {
const itemWidth = legendModel.get('itemWidth');
const itemHeight = legendModel.get('itemHeight');
- const inactiveColor = legendModel.get('inactiveColor');
- const inactiveBorderColor = legendModel.get('inactiveBorderColor');
- const symbolKeepAspect = legendModel.get('symbolKeepAspect');
- const legendModelItemStyle = legendModel.getModel('itemStyle');
-
const isSelected = legendModel.isSelected(name);
+
+ const inactiveColor = itemModel.get('inactiveColor');
+ const inactiveBorderColor = itemModel.get('inactiveBorderColor');
+ const symbolKeepAspect = itemModel.get('symbolKeepAspect');
+ const legendModelItemStyle = itemModel.getModel('itemStyle');
+
const itemGroup = new Group();
const textStyleModel = itemModel.getModel('textStyle');
@@ -577,22 +582,15 @@ function setSymbolStyle(
decal: PatternObject,
isSelected: boolean
) {
- let itemStyle;
+ const itemStyle = legendModelItemStyle.getItemStyle();
+ (symbol as Displayable).setStyle(itemStyle);
+
+ const style = (symbol as graphic.Path).style;
if (symbolType.indexOf('empty') < 0) {
- itemStyle = legendModelItemStyle.getItemStyle();
- itemStyle.lineWidth = borderWidth;
- // itemStyle.
- itemStyle.stroke = borderColor;
- (symbol as graphic.Path).style.stroke = borderColor;
- (symbol as graphic.Path).style.decal = decal;
- if (!isSelected) {
- itemStyle.stroke = inactiveBorderColor;
- }
+ style.decal = decal;
}
- else {
- itemStyle = legendModelItemStyle.getItemStyle(['borderWidth', 'borderColor']);
- }
- (symbol as Displayable).setStyle(itemStyle);
+ style.stroke = isSelected ? borderColor: inactiveBorderColor;
+ style.lineWidth = borderWidth;
return symbol;
}
diff --git a/src/export/option.ts b/src/export/option.ts
index 8ee454f..39ac46b 100644
--- a/src/export/option.ts
+++ b/src/export/option.ts
@@ -42,13 +42,19 @@ import type {TimelineOption as TimelineComponentOption} from '../component/timel
import type {SliderTimelineOption as TimelineSliderComponentOption} from '../component/timeline/SliderTimelineModel';
import type {LegendOption as PlainLegendComponentOption} from '../component/legend/LegendModel';
-import type {ScrollableLegendOption as ScrollableLegendComponentOption} from '../component/legend/ScrollableLegendModel';
+import type {
+ ScrollableLegendOption as ScrollableLegendComponentOption
+} from '../component/legend/ScrollableLegendModel';
import type {SliderDataZoomOption as SliderDataZoomComponentOption} from '../component/dataZoom/SliderZoomModel';
import type {InsideDataZoomOption as InsideDataZoomComponentOption} from '../component/dataZoom/InsideZoomModel';
-import type {ContinousVisualMapOption as ContinousVisualMapComponentOption} from '../component/visualMap/ContinuousModel';
-import type {PiecewiseVisualMapOption as PiecewiseVisualMapComponentOption} from '../component/visualMap/PiecewiseModel';
+import type {
+ ContinousVisualMapOption as ContinousVisualMapComponentOption
+} from '../component/visualMap/ContinuousModel';
+import type {
+ PiecewiseVisualMapOption as PiecewiseVisualMapComponentOption
+} from '../component/visualMap/PiecewiseModel';
import type {MarkLineOption as MarkLineComponentOption} from '../component/marker/MarkLineModel';
import type {MarkPointOption as MarkPointComponentOption} from '../component/marker/MarkPointModel';
diff --git a/src/util/symbol.ts b/src/util/symbol.ts
index bd7c4e6..c30cf76 100644
--- a/src/util/symbol.ts
+++ b/src/util/symbol.ts
@@ -338,7 +338,8 @@ export function createSymbol(
const isEmpty = symbolType.indexOf('empty') === 0;
if (isEmpty) {
const realSymbolType = symbolType.substr(5, 1).toLowerCase() + symbolType.substr(6);
- console.warn(`[DEPRECATED] Shape "${symbolType}" is deprecated. Please use "${realSymbolType}" with "fill" as "white" instead.`);
+ console.warn(`[DEPRECATED] Shape "${symbolType}" is deprecated. `
+ + `Please use "${realSymbolType}" with "fill" as "white" instead.`);
symbolType = realSymbolType;
}
let symbolPath: ECSymbol | graphic.Image;
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts] 05/10: WIP(legend): refactor and use fixed line width
Posted by ov...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch fix-legend
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 39d4e530f29db2129cf154dd1b23226c686bb2d3
Author: Ovilia <zw...@gmail.com>
AuthorDate: Tue Mar 16 15:50:39 2021 +0800
WIP(legend): refactor and use fixed line width
---
src/chart/line/install.ts | 21 ++--
src/component/legend/LegendModel.ts | 78 ++++++++++--
src/component/legend/LegendView.ts | 230 +++++++++++++++++++++++-------------
src/model/mixin/lineStyle.ts | 2 +-
4 files changed, 227 insertions(+), 104 deletions(-)
diff --git a/src/chart/line/install.ts b/src/chart/line/install.ts
index 35147e2..b5dd22f 100644
--- a/src/chart/line/install.ts
+++ b/src/chart/line/install.ts
@@ -39,19 +39,18 @@ export function install(registers: EChartsExtensionInstallRegisters) {
seriesType: 'line',
reset: function (seriesModel: LineSeriesModel) {
// Visual coding for legend
- const lineStyle = seriesModel.getModel('lineStyle');
- const itemStyle = seriesModel.getModel('itemStyle');
- const color = itemStyle ? itemStyle.get('color') : null;
- const borderColor = itemStyle ? itemStyle.get('borderColor') : null;//TODO
- let lineColor = lineStyle && lineStyle.get('color') || color;
-
+ const lineStyle = seriesModel.getModel('lineStyle').getLineStyle();
+ const itemStyle = seriesModel.getModel('itemStyle').getItemStyle();
+ const color = itemStyle && itemStyle.fill;
+ console.log(itemStyle, lineStyle);
if (lineStyle) {
- seriesModel.getData().setVisual('legendSymbolStyle', {
- borderColor,
- horizontalLineColor: lineColor,
- horizontalLineWidth: lineStyle.get('width')
- });
+ lineStyle.stroke = lineStyle.stroke || color;
}
+
+ seriesModel.getData().setVisual('legendSymbolStyle', {
+ itemStyle,
+ lineStyle
+ });
}
});
diff --git a/src/component/legend/LegendModel.ts b/src/component/legend/LegendModel.ts
index e603ce2..b595dc1 100644
--- a/src/component/legend/LegendModel.ts
+++ b/src/component/legend/LegendModel.ts
@@ -26,14 +26,17 @@ import {
BoxLayoutOptionMixin,
BorderOptionMixin,
ColorString,
- ItemStyleOption,
LabelOption,
LayoutOrient,
CommonTooltipOption,
- ZRColor
+ ZRColor,
+ DecalObject,
+ ZRLineType
} from '../../util/types';
import { Dictionary } from 'zrender/src/core/types';
import GlobalModel from '../../model/Global';
+import { ItemStyleProps } from '../../model/mixin/itemStyle';
+import { LineStyleProps } from './../../model/mixin/lineStyle';
type LegendDefaultSelectorOptionsProps = {
type: string;
@@ -60,6 +63,38 @@ export interface LegendSelectorButtonOption {
title?: string
}
+export interface LegendItemStyleOption {
+ color?: ZRColor | 'inherit'
+ opacity?: number | 'inherit'
+ decal?: DecalObject | 'none' | 'inherit'
+ shadowBlur?: number | 'inherit'
+ shadowColor?: ColorString | 'inherit'
+ shadowOffsetX?: number | 'inherit'
+ shadowOffsetY?: number | 'inherit'
+ borderColor?: ZRColor | 'inherit'
+ borderWidth?: number | 'inherit'
+ borderType?: ZRLineType | 'inherit'
+ borderCap?: CanvasLineCap | 'inherit'
+ borderJoin?: CanvasLineJoin | 'inherit'
+ borderDashOffset?: number | 'inherit'
+ borderMiterLimit?: number | 'inherit'
+}
+
+export interface LegendLineStyleOption {
+ width?: number | 'inherit' | 'auto'
+ color?: ZRColor | 'inherit'
+ opacity?: number | 'inherit'
+ type?: ZRLineType | 'inherit'
+ cap?: CanvasLineCap | 'inherit'
+ join?: CanvasLineJoin | 'inherit'
+ dashOffset?: number | 'inherit'
+ miterLimit?: number | 'inherit'
+ shadowBlur?: number | 'inherit'
+ shadowColor?: ColorString | 'inherit'
+ shadowOffsetX?: number | 'inherit'
+ shadowOffsetY?: number | 'inherit'
+}
+
export interface LegendStyleOption {
/**
* Icon of the legend items.
@@ -81,7 +116,9 @@ export interface LegendStyleOption {
*/
formatter?: string | ((name: string) => string)
- itemStyle?: ItemStyleOption
+ itemStyle?: LegendItemStyleOption
+
+ lineStyle?: LegendLineStyleOption
textStyle?: LabelOption
@@ -104,9 +141,9 @@ export interface LegendTooltipFormatterParams {
$vars: ['name']
}
-export interface LegendSymbolStyleOption extends ItemStyleOption {
- horizontalLineColor?: ZRColor,
- horizontalLineWidth?: number
+export interface LegendSymbolStyleOption {
+ itemStyle?: ItemStyleProps,
+ lineStyle?: LineStyleProps
}
export interface LegendOption extends ComponentOption, LegendStyleOption,
@@ -418,7 +455,34 @@ class LegendModel<Ops extends LegendOption = LegendOption> extends ComponentMode
inactiveBorderColor: '#ccc',
itemStyle: {
- // borderWidth: 0
+ color: 'inherit',
+ opacity: 'inherit',
+ decal: 'inherit',
+ shadowBlur: 0,
+ shadowColor: 'inherit',
+ shadowOffsetX: 'inherit',
+ shadowOffsetY: 'inherit',
+ borderColor: 'inherit',
+ borderWidth: 'inherit',
+ borderCap: 'inherit',
+ borderJoin: 'inherit',
+ borderDashOffset: 'inherit',
+ borderMiterLimit: 'inherit'
+ },
+
+ lineStyle: {
+ width: 'auto',
+ color: 'inherit',
+ opacity: 'inherit',
+ type: 'inherit',
+ cap: 'inherit',
+ join: 'inherit',
+ dashOffset: 'inherit',
+ miterLimit: 'inherit',
+ shadowBlur: 0,
+ shadowColor: 'inherit',
+ shadowOffsetX: 'inherit',
+ shadowOffsetY: 'inherit'
},
textStyle: {
diff --git a/src/component/legend/LegendView.ts b/src/component/legend/LegendView.ts
index 1fc9abf..7449414 100644
--- a/src/component/legend/LegendView.ts
+++ b/src/component/legend/LegendView.ts
@@ -25,7 +25,7 @@ import {setLabelStyle, createTextStyle} from '../../label/labelStyle';
import {makeBackground} from '../helper/listComponent';
import * as layoutUtil from '../../util/layout';
import ComponentView from '../../view/Component';
-import LegendModel, { LegendOption, LegendSelectorButtonOption, LegendSymbolStyleOption, LegendTooltipFormatterParams } from './LegendModel';
+import LegendModel, { LegendItemStyleOption, LegendLineStyleOption, LegendOption, LegendSelectorButtonOption, LegendStyleOption, LegendSymbolStyleOption, LegendTooltipFormatterParams } from './LegendModel';
import GlobalModel from '../../model/Global';
import ExtensionAPI from '../../core/ExtensionAPI';
import {
@@ -37,7 +37,9 @@ import {
CommonTooltipOption,
ColorString,
SeriesOption,
- SymbolOptionMixin
+ SymbolOptionMixin,
+ LineStyleOption,
+ DecalObject
} from '../../util/types';
import Model from '../../model/Model';
import Displayable, { DisplayableState } from 'zrender/src/graphic/Displayable';
@@ -45,6 +47,11 @@ import { PathStyleProps } from 'zrender/src/graphic/Path';
import { parse, stringify } from 'zrender/src/tool/color';
import {PatternObject} from 'zrender/src/graphic/Pattern';
import {SeriesModel} from '../../echarts';
+import linesLayout from '../../chart/lines/linesLayout';
+import {LineStyleProps} from '../../model/mixin/lineStyle';
+import {ItemStyleProps} from '../../model/mixin/itemStyle';
+import {number} from '../../export/api';
+import makeStyleMapper from '../../model/mixin/makeStyleMapper';
const curry = zrUtil.curry;
const each = zrUtil.each;
@@ -202,16 +209,14 @@ class LegendView extends ComponentView {
// Legend to control series.
if (seriesModel) {
const data = seriesModel.getData();
- const legendSymbolStyle = data.getVisual('legendSymbolStyle') || {};
+ const lineVisualStyle = (data.getVisual('legendSymbolStyle') || {}).lineStyle;
/**
* `data.getVisual('style')` may be the color from the register
* in series. For example, for line series,
*/
- const style = zrUtil.extend(
- zrUtil.extend({}, data.getVisual('style')),
- legendItemStyle
- );
+ const style = data.getVisual('style');
+ console.log(style, lineVisualStyle);
// Using rect symbol defaultly
const legendSymbolType = data.getVisual('legendSymbol') || 'roundRect';
@@ -222,7 +227,7 @@ class LegendView extends ComponentView {
name, dataIndex, itemModel, legendModel,
legendSymbolType, symbolType, symbolSize,
itemAlign,
- legendSymbolStyle, style, true, selectMode
+ lineVisualStyle, style, true, selectMode
);
itemGroup.on('click', curry(dispatchSelectAction, name, null, api, excludeSeriesId))
@@ -335,8 +340,8 @@ class LegendView extends ComponentView {
symbolType: string,
symbolSize: number | number[],
itemAlign: LegendOption['align'],
- legendSymbolStyle: LegendSymbolStyleOption,
- dataItemStyle: PathStyleProps,
+ lineVisualStyle: LineStyleProps,
+ itemVisualStyle: PathStyleProps,
isColorBySeries: boolean,
selectMode: LegendOption['selectedMode']
) {
@@ -352,24 +357,11 @@ class LegendView extends ComponentView {
const inactiveColor = itemModel.get('inactiveColor');
const inactiveBorderColor = itemModel.get('inactiveBorderColor');
const symbolKeepAspect = itemModel.get('symbolKeepAspect');
- const legendModelItemStyle = itemModel.getModel('itemStyle');
-
- let color = dataItemStyle.fill;
- if (!isColorBySeries) {
- const colorArr = parse(color as ColorString);
- // Color may be set to transparent in visualMap when data is out of range.
- // Do not show nothing.
- if (colorArr && colorArr[3] === 0) {
- colorArr[3] = 0.2;
- // TODO color is set to 0, 0, 0, 0. Should show correct RGBA
- color = stringify(colorArr, 'rgba');
- }
- }
+
+ const style = getLegendStyle(itemModel, lineVisualStyle, itemVisualStyle, isColorBySeries);
+ console.log(style)
symbolType = symbolType || 'roundRect';
- const borderColor = dataItemStyle[symbolType.indexOf('empty') > -1 ? 'fill' : 'stroke'];
- const borderWidth = dataItemStyle.lineWidth;
- const decal = dataItemStyle.decal;
const itemGroup = new Group();
@@ -387,55 +379,17 @@ class LegendView extends ComponentView {
// At least show one symbol, can't be all none
&& ((symbolType !== legendSymbolType) || symbolType === 'none');
- // Draw line if hasHorizontalLine, else draw symbol
- let legendBorderColor = isSelected
- ? (hasHorizontalLine
- ? legendSymbolStyle.horizontalLineColor
- : borderColor
+ // Draw line
+ if (legendSymbolType === 'line' || itemIcon === 'line') {
+ itemGroup.add(
+ createHorizontalLine(itemWidth, itemHeight, style.lineStyle)
)
- : inactiveBorderColor;
- legendBorderColor = legendBorderColor === 'auto'
- ? color : legendBorderColor;
- const legendBorderWidth = hasHorizontalLine
- ? (legendSymbolStyle.horizontalLineWidth == null
- ? borderWidth
- : legendSymbolStyle.horizontalLineWidth)
- : borderWidth;
- const legendSymbol = createSymbol(
- legendSymbolType,
- 0,
- 0,
- itemWidth,
- itemHeight,
- legendBorderColor,
- // symbolKeepAspect default true for legend
- symbolKeepAspect == null ? true : symbolKeepAspect
- );
- itemGroup.add(
- setSymbolStyle(legendSymbol, legendSymbolType, null, legendBorderWidth, decal)
- );
+ }
- // Draw symbol if hasHorizontalLine
- if (hasHorizontalLine) {
- const size = symbolSize == null
- ? itemHeight * 0.8
- : Math.min(itemHeight, symbolSize as number);
- if (symbolType === 'none') {
- symbolType = 'circle';
- }
- const legendSymbolCenter = createSymbol(
- symbolType,
- (itemWidth - size) / 2,
- (itemHeight - size) / 2,
- size,
- size,
- isSelected ? color : inactiveColor,
- // symbolKeepAspect default true for legend
- symbolKeepAspect == null ? true : symbolKeepAspect
- );
- // Put symbol in the center
+ // Put symbol in the center
+ if (itemIcon !== 'line') {
itemGroup.add(
- setSymbolStyle(legendSymbolCenter, symbolType, borderColor, borderWidth, decal)
+ createItem(symbolType, symbolSize, symbolKeepAspect, itemWidth, itemHeight, style.itemStyle)
);
}
@@ -583,23 +537,129 @@ class LegendView extends ComponentView {
}
-function setSymbolStyle(
- symbol: graphic.Path | graphic.Image,
+function getLegendStyle(
+ legendModel: LegendModel['_data'][number],
+ lineVisualStyle: LineStyleProps,
+ itemVisualStyle: PathStyleProps,
+ isColorBySeries: boolean
+) {
+ let color = itemVisualStyle.fill;
+ if (!isColorBySeries) {
+ const colorArr = parse(color as ColorString);
+ // Color may be set to transparent in visualMap when data is out of range.
+ // Do not show nothing.
+ if (colorArr && colorArr[3] === 0) {
+ colorArr[3] = 0.2;
+ // TODO color is set to 0, 0, 0, 0. Should show correct RGBA
+ color = stringify(colorArr, 'rgba');
+ }
+ }
+
+ /**
+ * Use series style if is inherit;
+ * elsewise, use legend style
+ */
+
+ // itemStyle
+ const legendItemModel = legendModel.getModel('itemStyle') as Model<LegendItemStyleOption>;
+ const itemProperties = [
+ ['fill', 'color'],
+ ['lineWidth', 'borderWidth'],
+ ['stroke', 'borderColor'],
+ ['width', 'width'],
+ ['opacity', 'opacity']
+ ];
+ const itemStyle: PathStyleProps = {};
+ for (let i = 0; i < itemProperties.length; ++i) {
+ const propName = itemProperties[i][1] as keyof LegendItemStyleOption;
+ const visualName = itemProperties[i][0] as keyof PathStyleProps;
+ const value = legendItemModel.getShallow(propName) as LegendItemStyleOption[keyof LegendItemStyleOption];
+ if (value === 'inherit') {
+ (itemStyle as any)[visualName] = itemVisualStyle[visualName];
+ }
+ else {
+ (itemStyle as any)[visualName] = value;
+ }
+ }
+
+ // lineStyle
+ const legendLineModel = legendModel.getModel('lineStyle') as Model<LegendLineStyleOption>;
+ const lineProperties = [
+ ['stroke', 'color'],
+ ['lineWidth', 'width']
+ ];
+ const lineStyle: LineStyleProps = {};
+ for (let i = 0; i < lineProperties.length; ++i) {
+ const propName = lineProperties[i][1] as keyof LegendLineStyleOption;
+ const visualName = lineProperties[i][0] as keyof LineStyleProps;
+ const value = legendLineModel.getShallow(propName) as LegendLineStyleOption[keyof LegendLineStyleOption];
+ if (value === 'inherit') {
+ (lineStyle as any)[visualName] = lineVisualStyle[visualName];
+ }
+ else if (value === 'auto' && visualName === 'lineWidth') {
+ // If lineStyle.width is 'auto', it is set to be 2 if series has border
+ lineStyle.lineWidth = lineVisualStyle.lineWidth > 0 ? 2 : 0;
+ }
+ else {
+ (lineStyle as any)[visualName] = value;
+ }
+ }
+
+ // Fix auto color to real color
+ (itemStyle.fill === 'auto') && (itemStyle.fill = color);
+ (itemStyle.stroke === 'auto') && (itemStyle.stroke = color);
+ (lineStyle.stroke === 'auto') && (lineStyle.stroke = color);
+
+ return { itemStyle, lineStyle };
+}
+
+function createHorizontalLine(
+ itemWidth: number,
+ itemHeight: number,
+ style: LineStyleProps
+) {
+ const symbol = createSymbol(
+ 'line',
+ 0,
+ 0,
+ itemWidth,
+ itemHeight,
+ style.stroke,
+ false
+ );
+ symbol.setStyle(style);
+ return symbol;
+}
+
+function createItem(
symbolType: string,
- borderColor: ZRColor,
- borderWidth: number,
- decal: PatternObject
+ symbolSize: number | number[],
+ symbolKeepAspect: boolean,
+ itemWidth: number,
+ itemHeight: number,
+ style: ItemStyleProps
) {
- const style = (symbol as graphic.Path).style;
- if (symbolType === 'line') {
- style.stroke = style.fill;
- style.fill = 'none';
+ if (symbolType === 'none') {
+ symbolType = 'circle';
}
- else {
- style.decal = decal;
- borderColor && (style.stroke = borderColor);
+ const size = symbolSize == null
+ ? itemHeight
+ : Math.min(itemHeight, symbolSize as number);
+ const symbol = createSymbol(
+ symbolType,
+ (itemWidth - size) / 2,
+ (itemHeight - size) / 2,
+ size,
+ size,
+ style.fill,
+ // symbolKeepAspect default true for legend
+ symbolKeepAspect == null ? true : symbolKeepAspect
+ );
+ symbol.setStyle(style);
+ if (symbolType.indexOf('empty') > -1) {
+ symbol.style.stroke = symbol.style.fill;
+ symbol.style.fill = '#fff';
}
- style.lineWidth = borderWidth;
return symbol;
}
diff --git a/src/model/mixin/lineStyle.ts b/src/model/mixin/lineStyle.ts
index 168102e..712b2fc 100644
--- a/src/model/mixin/lineStyle.ts
+++ b/src/model/mixin/lineStyle.ts
@@ -54,7 +54,7 @@ type LineStyleKeys = 'lineWidth'
| 'lineJoin'
| 'miterLimit';
-type LineStyleProps = Pick<PathStyleProps, LineStyleKeys>;
+export type LineStyleProps = Pick<PathStyleProps, LineStyleKeys>;
class LineStyleMixin {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org