Merge pull request #14497 from apache/fix-legend

feat(legend): make default legend more intuitive
apache · Apr 7, 2021 · 304685d · 304685d
2 parents f0eb7ae + 3966af8
commit 304685d
Show file tree

Hide file tree

Showing 20 changed files with 699 additions and 177 deletions.
diff --git a/src/chart/bar/install.ts b/src/chart/bar/install.ts
@@ -36,14 +36,6 @@ export function install(registers: EChartsExtensionInstallRegisters) {
     // only exist in this module, but probably also exist in other modules, like `barPolar`.
     registers.registerLayout(registers.PRIORITY.VISUAL.PROGRESSIVE_LAYOUT, largeLayout);
 
-    registers.registerVisual({
-        seriesType: 'bar',
-        reset: function (seriesModel) {
-            // Visual coding for legend
-            seriesModel.getData().setVisual('legendSymbol', 'roundRect');
-        }
-    });
-
     // Down sample after filter
     registers.registerProcessor(
         registers.PRIORITY.PROCESSOR.STATISTIC,

diff --git a/src/chart/boxplot/boxplotVisual.ts b/src/chart/boxplot/boxplotVisual.ts
@@ -22,8 +22,5 @@ import ExtensionAPI from '../../core/ExtensionAPI';
 import BoxplotSeriesModel from './BoxplotSeries';
 
 export default function boxplotVisual(ecModel: GlobalModel, api: ExtensionAPI) {
-    ecModel.eachRawSeriesByType('boxplot', function (seriesModel: BoxplotSeriesModel) {
-        seriesModel.getData().setVisual('legendSymbol', 'roundRect');
-    });
 
 }
diff --git a/src/chart/candlestick/candlestickVisual.ts b/src/chart/candlestick/candlestickVisual.ts
@@ -53,8 +53,6 @@ const candlestickVisual: StageHandler = {
 
         const data = seriesModel.getData();
 
-        data.setVisual('legendSymbol', 'roundRect');
-
         // Only visible series has each data be visual encoded
         if (ecModel.isSeriesFiltered(seriesModel)) {
             return;

diff --git a/src/chart/line/LineSeries.ts b/src/chart/line/LineSeries.ts
@@ -39,6 +39,9 @@ import {
 import List from '../../data/List';
 import type Cartesian2D from '../../coord/cartesian/Cartesian2D';
 import type Polar from '../../coord/polar/Polar';
+import {createSymbol, ECSymbol} from '../../util/symbol';
+import {Group} from '../../util/graphic';
+import {LegendSymbolParams} from '../../component/legend/LegendModel';
 
 type LineDataValue = OptionDataValue | OptionDataValue[];
 
@@ -125,7 +128,6 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> {
     coordinateSystem: Cartesian2D | Polar;
 
     hasSymbolVisual = true;
-    legendSymbol = 'line';
 
     getInitialData(option: LineSeriesOption): List {
         if (__DEV__) {
@@ -151,6 +153,11 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> {
             position: 'top'
         },
 
+        itemStyle: {
+            color: 'auto',
+            borderWidth: 2
+        },
+
         endLabel: {
             show: false,
             valueAnimation: true,
@@ -204,6 +211,48 @@ class LineSeriesModel extends SeriesModel<LineSeriesOption> {
         progressive: 0,
         hoverLayerThreshold: Infinity
     };
+
+    getLegendIcon(opt: LegendSymbolParams): ECSymbol | Group {
+        const group = new Group();
+
+        const line = createSymbol(
+            'line',
+            0,
+            opt.itemHeight / 2,
+            opt.itemWidth,
+            0,
+            opt.lineStyle.stroke,
+            false
+        );
+        group.add(line);
+        line.setStyle(opt.lineStyle);
+
+        const visualType = this.getData().getVisual('symbol');
+        const symbolType = visualType === 'none' ? 'circle' : visualType;
+
+        // Symbol size is 80% when there is a line
+        const size = opt.itemHeight * 0.8;
+        const symbol = createSymbol(
+            symbolType,
+            (opt.itemWidth - size) / 2,
+            (opt.itemHeight - size) / 2,
+            size,
+            size,
+            opt.itemStyle.fill,
+            opt.symbolKeepAspect
+        );
+        group.add(symbol);
+
+        symbol.setStyle(opt.itemStyle);
+
+        if (symbolType.indexOf('empty') > -1) {
+            symbol.style.stroke = symbol.style.fill;
+            symbol.style.fill = '#fff';
+            symbol.style.lineWidth = 2;
+        }
+
+        return group;
+    }
 }
 
 export default LineSeriesModel;
diff --git 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) {
+            const data = seriesModel.getData();
+            // Visual coding for legend
+            const lineStyle = seriesModel.getModel('lineStyle').getLineStyle();
+            if (lineStyle && !lineStyle.stroke) {
+                // Fill in visual should be palette color if
+                // has color callback
+                lineStyle.stroke = data.getVisual('style').fill;
+            }
+            data.setVisual('legendLineStyle', lineStyle);
+        }
+    });
+
     // Down sample after filter
     registers.registerProcessor(
         registers.PRIORITY.PROCESSOR.STATISTIC,

diff --git a/src/chart/map/MapSeries.ts b/src/chart/map/MapSeries.ts
@@ -40,6 +40,9 @@ import List from '../../data/List';
 import Model from '../../model/Model';
 import Geo from '../../coord/geo/Geo';
 import { createTooltipMarkup } from '../../component/tooltip/tooltipMarkup';
+import {createSymbol, ECSymbol} from '../../util/symbol';
+import {LegendSymbolParams} from '../../component/legend/LegendModel';
+import {Group} from '../../util/graphic';
 
 export interface MapStateOption {
     itemStyle?: GeoItemStyleOption
@@ -224,6 +227,30 @@ class MapSeries extends SeriesModel<MapSeriesOption> {
         this.option.center = center;
     }
 
+    getLegendIcon(opt: LegendSymbolParams): ECSymbol | Group {
+        const symbolType = opt.symbolType || 'roundRect';
+        const symbol = createSymbol(
+            symbolType,
+            0,
+            0,
+            opt.itemWidth,
+            opt.itemHeight,
+            opt.itemStyle.fill,
+            opt.symbolKeepAspect
+        );
+
+        symbol.setStyle(opt.itemStyle);
+        // Map do not use itemStyle.borderWidth as border width
+        symbol.style.stroke = 'none';
+
+        if (symbolType.indexOf('empty') > -1) {
+            symbol.style.stroke = symbol.style.fill;
+            symbol.style.fill = '#fff';
+            symbol.style.lineWidth = 2;
+        }
+        return symbol;
+    }
+
     static defaultOption: MapSeriesOption = {
         // 一级层叠
         zlevel: 0,

diff --git a/src/chart/radar/RadarSeries.ts b/src/chart/radar/RadarSeries.ts
@@ -160,8 +160,7 @@ class RadarSeriesModel extends SeriesModel<RadarSeriesOption> {
         // areaStyle: {
         // },
         // itemStyle: {}
-        symbol: 'emptyCircle',
-        symbolSize: 4
+        symbolSize: 8
         // symbolRotate: null
     };
 }

diff --git a/src/chart/tree/TreeSeries.ts b/src/chart/tree/TreeSeries.ts
@@ -272,7 +272,7 @@ class TreeSeriesModel extends SeriesModel<TreeSeriesOption> {
 
         itemStyle: {
             color: 'lightsteelblue',
-            borderColor: '#c23531',
+            // borderColor: '#c23531',
             borderWidth: 1.5
         },