This is an automated email from the ASF dual-hosted git repository. wangzx pushed a commit to branch fix-ssr-line in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 47b6407f9b89358899dd78244d44040728241c04 Author: plainheart <[email protected]> AuthorDate: Wed Dec 7 15:30:40 2022 +0800 fix(ssr): fix label doesn't show in line series when `ssr` is enabled.` --- src/chart/line/LineView.ts | 14 ++--- test/runTest/actions/__meta__.json | 1 + test/runTest/actions/svg-ssr.json | 1 + test/svg-ssr.html | 122 +++++++++++++++++++++++++++++++++++++ 4 files changed, 131 insertions(+), 7 deletions(-) diff --git a/src/chart/line/LineView.ts b/src/chart/line/LineView.ts index daf1cbfb5..d16e341a7 100644 --- 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(); diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json index 8a4a0c0b3..e44e38456 100644 --- a/test/runTest/actions/__meta__.json +++ b/test/runTest/actions/__meta__.json @@ -173,6 +173,7 @@ "stackBar-dataZoom": 7, "sunburst-book": 1, "sunburst-canvas": 1, + "svg-ssr": 1, "symbol": 1, "symbol2": 1, "themeRiver": 1, diff --git a/test/runTest/actions/svg-ssr.json b/test/runTest/actions/svg-ssr.json new file mode 100644 index 000000000..639333deb --- /dev/null +++ b/test/runTest/actions/svg-ssr.json @@ -0,0 +1 @@ +[{"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 diff --git a/test/svg-ssr.html b/test/svg-ssr.html new file mode 100644 index 000000000..af9a4dab7 --- /dev/null +++ b/test/svg-ssr.html @@ -0,0 +1,122 @@ +<!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> --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
