feat(ssr): server-side rendering and client hydration #18334

package.json

@@ -64,7 +64,7 @@
   },
   "dependencies": {
     "tslib": "2.3.0",
-    "zrender": "5.4.3"
+    "zrender": "https://github.com/ecomfe/zrender.git#ssr"
   },
   "devDependencies": {
     "@babel/code-frame": "7.10.4",

src/component/legend/LegendView.ts

@@ -225,6 +225,14 @@ class LegendView extends ComponentView {
                     .on('mouseover', curry(dispatchHighlightAction, seriesModel.name, null, api, excludeSeriesId))
                     .on('mouseout', curry(dispatchDownplayAction, seriesModel.name, null, api, excludeSeriesId));
 
+                itemGroup.eachChild(child => {
+                    child.__metaData = {
+                        type: 'legendItem',
+                        seriesIndex: seriesModel.seriesIndex,
+                        dataIndex
+                    };
+                });
+
                 legendDrawnMap.set(name, true);
             }
             else {
@@ -269,6 +277,14 @@ class LegendView extends ComponentView {
                             .on('mouseover', curry(dispatchHighlightAction, null, name, api, excludeSeriesId))
                             .on('mouseout', curry(dispatchDownplayAction, null, name, api, excludeSeriesId));
 
+                        itemGroup.eachChild(child => {
+                            child.__metaData = {
+                                type: 'legendItem',
+                                seriesIndex: seriesModel.seriesIndex,
+                                dataIndex
+                            };
+                        });
+
                         legendDrawnMap.set(name, true);
                     }
 
@@ -430,6 +446,11 @@ class LegendView extends ComponentView {
             shape: itemGroup.getBoundingRect(),
             invisible: true
         });
+        hitRect.__metaData = {
+            type: 'legendItem',
+            seriesIndex: seriesModel.seriesIndex,
+            dataIndex
+        };
 
         const tooltipModel =
             legendItemModel.getModel('tooltip') as Model<CommonTooltipOption<LegendTooltipFormatterParams>>;

src/util/innerStore.ts

@@ -70,7 +70,19 @@ export const setCommonECData = (seriesIndex: number, dataType: SeriesDataType, d
                 childECData.seriesIndex = seriesIndex;
                 childECData.dataIndex = dataIdx;
                 childECData.dataType = dataType;
+                child.__metaData = {
+                    type: 'seriesItem',
+                    seriesIndex,
+                    dataIndex: dataIdx
+                };
             });
         }
+        else {
+            el.__metaData = {
+                type: 'seriesItem',
+                seriesIndex,
+                dataIndex: dataIdx
+            };
+        }
     }
 };