fix(legend): fix line and radar

src/chart/line/install.ts

@@ -38,15 +38,15 @@ export function install(registers: EChartsExtensionInstallRegisters) {
     registers.registerVisual({
         seriesType: 'line',
         reset: function (seriesModel: LineSeriesModel) {
+            const data = seriesModel.getData();
             // Visual coding for legend
             const lineStyle = seriesModel.getModel('lineStyle').getLineStyle();
-            const itemStyle = seriesModel.getModel('itemStyle').getItemStyle();
-            const color = itemStyle && itemStyle.fill;
-            if (lineStyle) {
-                lineStyle.stroke = lineStyle.stroke || color;
+            if (lineStyle && !lineStyle.stroke) {
+                // Fill in visual should be palette color if
+                // has color callback
+                lineStyle.stroke = data.getVisual('style').fill;
             }
-
-            seriesModel.getData().setVisual('legendLineStyle', lineStyle);
+            data.setVisual('legendLineStyle', lineStyle);
         }
     });
 

src/component/legend/LegendView.ts

@@ -543,24 +543,34 @@ function getLegendStyle(
         const visualName = itemProperties[i][0] as keyof PathStyleProps;
         const value = legendItemModel.getShallow(propName) as LegendItemStyleOption[keyof LegendItemStyleOption];
         if (value === 'inherit') {
-            if (visualName === 'fill') {
-                /**
-                 * Series with visualDrawType as 'stroke' should have
-                 * series stroke as legend fill
-                 */
-                itemStyle.fill = itemVisualStyle[drawType];
-            }
-            else if (visualName === 'stroke') {
-                /**
-                 * symbol type with "emptyXXX" should use fill color
-                 * in visual style
-                 */
-                itemStyle.stroke = itemVisualStyle[
-                    symbolType.startsWith('empty') ? 'fill' : 'stroke'
-                ];
-            }
-            else {
-                (itemStyle as any)[visualName] = itemVisualStyle[visualName];
+            switch (visualName) {
+                case 'fill':
+                    /**
+                     * Series with visualDrawType as 'stroke' should have
+                     * series stroke as legend fill
+                     */
+                    itemStyle.fill = itemVisualStyle[drawType];
+                    break;
+
+                case 'stroke':
+                    /**
+                     * symbol type with "emptyXXX" should use fill color
+                     * in visual style
+                     */
+                    itemStyle.stroke = itemVisualStyle[
+                        symbolType.startsWith('empty') ? 'fill' : 'stroke'
+                    ];
+                    break;
+
+                case 'opacity':
+                    /**
+                     * Use lineStyle.opacity if drawType is stroke
+                     */
+                    itemStyle.opacity = (drawType === 'fill' ? itemVisualStyle : lineVisualStyle).opacity;
+                    break;
+
+                default:
+                    (itemStyle as any)[visualName] = itemVisualStyle[visualName];
             }
         }
         else if (value === 'auto' && visualName === 'lineWidth') {

src/component/radar/install.ts

@@ -32,9 +32,12 @@ export function install(registers: EChartsExtensionInstallRegisters) {
         seriesType: 'radar',
         reset: function (seriesModel: RadarSeriesModel) {
             const data = seriesModel.getData();
+            let symbol = data.getVisual('symbol');
+            // Use roundRect if no symbol type
+            (!symbol || symbol === 'none') && (symbol = 'roundRect');
+
             data.each(function (idx) {
-                console.log('idx', idx);
-                data.setItemVisual(idx, 'legendSymbol', 'roundRect');
+                data.setItemVisual(idx, 'legendSymbol', symbol);
             });
         }
     })

src/visual/style.ts

@@ -102,8 +102,12 @@ const seriesStyleTask: StageHandler = {
                 globalStyle[colorKey] = colorPalette;
                 data.setVisual('colorFromPalette', true);
             }
-            globalStyle.fill = (globalStyle.fill === 'auto' || typeof globalStyle.fill === 'function') ? colorPalette : globalStyle.fill;
-            globalStyle.stroke = (globalStyle.stroke === 'auto' || typeof globalStyle.stroke === 'function') ? colorPalette : globalStyle.stroke;
+            globalStyle.fill = (globalStyle.fill === 'auto' || typeof globalStyle.fill === 'function')
+                ? colorPalette
+                : globalStyle.fill;
+            globalStyle.stroke = (globalStyle.stroke === 'auto' || typeof globalStyle.stroke === 'function')
+                ? colorPalette
+                : globalStyle.stroke;
         }
 
         data.setVisual('style', globalStyle);

test/legend-style.html

@@ -202,7 +202,7 @@ under the License.
                     '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 E: the style of the line should be the same in that in the legend; items colored pink in legend and green in series',
                     'Line F: the colors in the legend should be blue'
                 ],
                 option: option

test/radar.html

@@ -49,7 +49,10 @@ under the License.
                     },
                     tooltip: {},
                     legend: {
-                        data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）含有 "-" 数据', '第一个元素是 null']
+                        data: [{
+                            icon: 'circle',
+                            name: 'Legend 应为 Circle'
+                        }, '实际开销（Actual Spending）含有 "-" 数据', '第一个元素是 null', 'symbol 为 none 的需要用 roundRect']
                     },
                     radar: {
                         radius: [50, '70%'],
@@ -80,7 +83,7 @@ under the License.
                         data : [
                             {
                                 value : [0, 10000, 28000, 35000, 50000, 19000],
-                                name : '预算分配（Allocated Budget）'
+                                name : 'Legend 应为 Circle'
                             },
                              {
                                 value : [50, 14000, 28000, 31000, '-', 21000],
@@ -96,6 +99,21 @@ under the License.
                         symbolRotate: function(value, params) {
                             return ~~(360 * Math.random());
                         }
+                    }, {
+                        name: '2',
+                        type: 'radar',
+                        label: {
+                            normal: {
+                                show: true
+                            }
+                        },
+                        data : [
+                            {
+                                value : [100, 2800, 3500, 5000, 1900, 1000],
+                                name : 'symbol 为 none 的需要用 roundRect'
+                            }
+                        ],
+                        symbol: 'none'
                     }]
                 });
                 var theIndex = 2;