WIP(legend): style when series is not selected

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);
         }
     });
 

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',

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 };
 }
 

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[]