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:05 UTC
[echarts] 03/10: WIP(legend): reserve emptyCircle
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