Merge pull request #18032 from apache/fix-ssr-line

fix(ssr): fix label doesn't show in line series when `ssr` is enabled

Merge pull request #18032 from apache/fix-ssr-line
fix(ssr): fix label doesn't show in line series when `ssr` is enabled
d6ab9d4c · Yi Shen · GitHub · 6be45ba6 · 47b6407f · d6ab9d4c
4 changed file
--- a/src/chart/line/LineView.ts
+++ b/src/chart/line/LineView.ts
@@ -644,7 +644,7 @@ class LineView extends ChartView {

        const lineGroup = this._lineGroup;

-        const hasAnimation = seriesModel.get('animation');
+        const hasAnimation = !ecModel.ssr && seriesModel.isAnimationEnabled();

        const isAreaChart = !areaStyleModel.isEmpty();

@@ -1085,10 +1085,10 @@ class LineView extends ChartView {
        if (zrUtil.isFunction(seriesDuration)) {
            seriesDuration = seriesDuration(null);
        }
-        const seriesDalay = seriesModel.get('animationDelay') || 0;
-        const seriesDalayValue = zrUtil.isFunction(seriesDalay)
-            ? seriesDalay(null)
-            : seriesDalay;
+        const seriesDelay = seriesModel.get('animationDelay') || 0;
+        const seriesDelayValue = zrUtil.isFunction(seriesDelay)
+            ? seriesDelay(null)
+            : seriesDelay;

        data.eachItemGraphicEl(function (symbol: SymbolExtended, idx) {
            const el = symbol;
@@ -1131,8 +1131,8 @@ class LineView extends ChartView {
                    ratio = 1 - ratio;
                }

-                const delay = zrUtil.isFunction(seriesDalay) ? seriesDalay(idx)
-                    : (seriesDuration * ratio) + seriesDalayValue;
+                const delay = zrUtil.isFunction(seriesDelay) ? seriesDelay(idx)
+                    : (seriesDuration * ratio) + seriesDelayValue;

                const symbolPath = el.getSymbolPath();
                const text = symbolPath.getTextContent();

--- a/test/runTest/actions/__meta__.json
+++ b/test/runTest/actions/__meta__.json
@@ -174,6 +174,7 @@
  "stackBar-dataZoom": 7,
  "sunburst-book": 1,
  "sunburst-canvas": 1,
+  "svg-ssr": 1,
  "symbol": 1,
  "symbol2": 1,
  "themeRiver": 1,

--- a/test/runTest/actions/svg-ssr.json
+++ b/test/runTest/actions/svg-ssr.json
+[{"name":"Action 1","ops":[{"type":"mousemove","time":394,"x":138,"y":49},{"type":"mousedown","time":588,"x":113,"y":47},{"type":"mousemove","time":599,"x":113,"y":47},{"type":"mouseup","time":740,"x":113,"y":47},{"time":741,"delay":400,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1670398010436}]
\ No newline at end of file
--- a/test/svg-ssr.html
+++ b/test/svg-ssr.html
+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script src="lib/simpleRequire.js"></script>
+        <script src="lib/config.js"></script>
+        <script src="lib/jquery.min.js"></script>
+        <script src="lib/facePrint.js"></script>
+        <script src="lib/testHelper.js"></script>
+        <!-- <script src="ut/lib/canteen.js"></script> -->
+        <link rel="stylesheet" href="lib/reset.css" />
+    </head>
+    <body>
+        <style>
+        </style>
+
+
+        <div id="main0"></div>
+        <div id="main1"></div>
+
+
+
+
+        <script>
+
+            require([
+                'echarts'
+            ], function (echarts) {
+                var option = {
+                    title: {
+                        text: '<s1\'&fr\"u>3<'
+                    },
+                    xAxis: {
+                        type: "category",
+                        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
+                    },
+                    yAxis: {
+                        type: "value"
+                    },
+                    series: [
+                        {
+                            data: [120, 200, 150, 80, 70, 110, 130],
+                            type: "line",
+                            label: {
+                                show: true
+                            },
+                            stack: 'a'
+                        },
+                        {
+                            data: [110, 202, 151, 86, 72, 113, 146],
+                            type: "line",
+                            label: {
+                                show: true
+                            },
+                            stack: 'a'
+                        }
+                    ]
+                };
+                const container = document.getElementById('main0');
+                var chart = echarts.init(null, null, {
+                    width: 500,
+                    height: 500,
+                    renderer: 'svg',
+                    ssr: true
+                });
+                const nativeSetOption = chart.setOption;
+                chart.setOption = function () {
+                    nativeSetOption.apply(this, arguments);
+                    chartContainer.innerHTML = chart.renderToSVGString();
+                };
+
+                const chartContainer = document.createElement('div');
+                const title = document.createElement('div')
+                title.innerHTML = [
+                    'The label should be visible',
+                    'Click the <b>Update to step line</b> button, the line and symbols should be displayed correctly'
+                ].join('<br>');
+                const updateBtn = document.createElement('button');
+                updateBtn.innerHTML = 'Update to step line';
+                updateBtn.onclick = function () {
+                    chart.setOption({
+                        series: [
+                            {
+                                step: true,
+                                data: [120, 400, 150, 80, 70, 110, 130],
+                            }
+                        ]
+                    });
+                };
+                container.appendChild(title);
+                container.appendChild(updateBtn);
+                container.appendChild(chartContainer);
+
+                chart.setOption(option);
+            });
+
+        </script>
+
+
+    </body>
+</html>