Merge pull request #18260 from ChepteaCatalin/fix-18196

fix(legend): inherit legend rich text color from legend's options

src/component/legend/LegendView.ts

@@ -413,16 +413,18 @@ class LegendView extends ComponentView {
             content = formatter(name);
         }
 
-        const inactiveColor = legendItemModel.get('inactiveColor');
+        const textColor = isSelected
+            ? textStyleModel.getTextColor() : legendItemModel.get('inactiveColor');
+
         itemGroup.add(new graphic.Text({
             style: createTextStyle(textStyleModel, {
                 text: content,
                 x: textX,
                 y: itemHeight / 2,
-                fill: isSelected ? textStyleModel.getTextColor() : inactiveColor,
+                fill: textColor,
                 align: textAlign,
                 verticalAlign: 'middle'
-            })
+            }, {inheritColor: textColor})
         }));
 
         // Add a invisible rect to increase the area of mouse hover

test/legend-style.html

@@ -36,6 +36,7 @@ under the License.
 
         <div id="main1"></div>
         <div id="main2"></div>
+        <div id="main3"></div>
 
         <script>
             function getData(seriesId) {
@@ -275,5 +276,60 @@ under the License.
             });
         });
         </script>
+
+
+    <script>
+        require(['echarts'], function (echarts) {
+            var option = {
+                textStyle: {
+                    color: 'green'
+                },
+                legend: {
+                    data: ['Line A', 'Line B'],
+                    inactiveColor: 'gray',
+                    selected: { 'Line A': false, 'Line B': true },
+                    textStyle: {
+                        color: 'red',
+                        rich: {
+                            bold: {
+                                color: 'inherit',
+                            },
+                        },
+                    },
+                    formatter: function (name) {
+                        return `{bold|${name}}`
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    data: ['Mon', 'Tue']
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                series: [
+                    {
+                        name: 'Line A',
+                        type: 'line',
+                        data: [69, 50],
+                    },
+                    {
+                        name: 'Line B',
+                        type: 'line',
+                        data: [120, 130]
+                    },
+                ]
+            };
+
+            var chart = testHelper.create(echarts, 'main3', {
+                title: [
+                    '**Legend rich text should inherit color from legend option**',
+                    'Line A: gray text',
+                    'Line B: red text',
+                ],
+                option: option
+            });
+        });
+    </script>
     </body>
 </html>