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:04 UTC
[echarts] 02/10: feat(legend): line series default legend and
customed style
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