fix(lines): symbolSize should be updated #18350

8abf36c2 · cvSoldier · GitHub · 6dbe25ca · 8abf36c2 · 8abf36c2
4 changed file
--- a/src/chart/helper/Line.ts
+++ b/src/chart/helper/Line.ts
@@ -64,6 +64,22 @@ interface InnerLineLabel extends LineLabel {
 function makeSymbolTypeKey(symbolCategory: 'fromSymbol' | 'toSymbol') {
    return '_' + symbolCategory + 'Type' as '_fromSymbolType' | '_toSymbolType';
 }
+function makeSymbolTypeValue(name: 'fromSymbol' | 'toSymbol', lineData: LineList, idx: number) {
+    const symbolType = lineData.getItemVisual(idx, name);
+    if (!symbolType || symbolType === 'none') {
+        return symbolType;
+    }
+    const symbolSize = lineData.getItemVisual(idx, name + 'Size' as 'fromSymbolSize' | 'toSymbolSize');
+    const symbolRotate = lineData.getItemVisual(idx, name + 'Rotate' as 'fromSymbolRotate' | 'toSymbolRotate');
+    const symbolOffset = lineData.getItemVisual(idx, name + 'Offset' as 'fromSymbolOffset' | 'toSymbolOffset');
+    const symbolKeepAspect = lineData.getItemVisual(idx,
+        name + 'KeepAspect' as 'fromSymbolKeepAspect' | 'toSymbolKeepAspect');
+    const symbolSizeArr = symbolUtil.normalizeSymbolSize(symbolSize);
+    const symbolOffsetArr = symbolUtil.normalizeSymbolOffset(symbolOffset || 0, symbolSizeArr);
+    return symbolType + symbolSizeArr + symbolOffsetArr + (symbolRotate || '') + (symbolKeepAspect || '');
+}
 /**
 * @inner
@@ -164,7 +180,7 @@ class Line extends graphic.Group {
            // it will be updated after line#update.
            // Or symbol position and rotation update in line#beforeUpdate will be one frame slow
            this.add(symbol);
-            this[makeSymbolTypeKey(symbolCategory)] = lineData.getItemVisual(idx, symbolCategory);
+            this[makeSymbolTypeKey(symbolCategory)] = makeSymbolTypeValue(symbolCategory, lineData, idx);
        }, this);
        this._updateCommonStl(lineData, idx, seriesScope);
@@ -184,7 +200,7 @@ class Line extends graphic.Group {
        graphic.updateProps(line, target, seriesModel, idx);
        each(SYMBOL_CATEGORIES, function (symbolCategory) {
-            const symbolType = (lineData as LineList).getItemVisual(idx, symbolCategory);
+            const symbolType = makeSymbolTypeValue(symbolCategory, lineData as LineList, idx);
            const key = makeSymbolTypeKey(symbolCategory);
            // Symbol changed
            if (this[key] !== symbolType) {

--- a/test/lines-symbolSize-update.html
+++ b/test/lines-symbolSize-update.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>
+        <div id="main0"></div>
+        <script>
+        // See <https://github.com/apache/echarts/issues/18350>
+        require([
+            'echarts',
+        ], function (echarts) {
+            var maxValue = 10;
+            var linesData = Array.from(Array(maxValue).keys()).map((value) => {
+                return {
+                    coords: [
+                        [value * Math.random(), value * Math.random()],
+                        [value * Math.random(), value * Math.random()]
+                    ]
+                };
+            });
+            var option = {
+                xAxis: {
+                    type: 'value',
+                    min: 0,
+                    max: maxValue
+                },
+                yAxis: {
+                    type: 'value',
+                    min: 0,
+                    max: maxValue
+                },
+                series: [
+                    {
+                        id: '1',
+                        type: 'lines',
+                        symbol: ['none', 'arrow'],
+                        symbolSize: 10,
+                        coordinateSystem: 'cartesian2d',
+                        lineStyle: {
+                            color: '#c46e54',
+                            width: 1
+                        },
+                        data: linesData
+                    }
+                ]
+            };
+            var chart = testHelper.create(echarts, 'main0', {
+                title: ['Lines series symbolSize should be updated'],
+                option: option,
+                buttons: [{
+                    text: 'Click to change symbolSize',
+                    onclick: function () {
+                        chart.setOption(
+                            {
+                                series: [
+                                    {
+                                        id: '1',
+                                        type: 'lines',
+                                        symbol: ['none', 'arrow'],
+                                        symbolSize: 30,
+                                    }
+                                ]
+                            },
+                        );
+                    }
+                }],
+            });
+        });
+        </script>
+    </body>
+</html>
--- a/test/runTest/actions/__meta__.json
+++ b/test/runTest/actions/__meta__.json
@@ -130,6 +130,7 @@
  "line-sampling": 2,
  "line-visual2": 2,
  "lines-bus": 1,
+  "lines-symbolSize-update": 1,
  "map": 3,
  "map-contour": 2,
  "map-default": 1,

--- a/test/runTest/actions/lines-symbolSize-update.json
+++ b/test/runTest/actions/lines-symbolSize-update.json
+[{"name":"Action 1","ops":[{"type":"mousemove","time":484,"x":83,"y":96},{"type":"mousemove","time":685,"x":91,"y":83},{"type":"mousemove","time":899,"x":92,"y":83},{"type":"mousedown","time":1506,"x":92,"y":83},{"type":"mouseup","time":1511,"x":92,"y":83},{"time":1512,"delay":400,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1679391497375}]
\ No newline at end of file