Merge pull request #12367 from plainheart/fix-12279

fix(tree): the symbols of image type do not display at the first rendering. close #12279.
apache · Jun 22, 2020 · 8631f27 · 8631f27
2 parents 300f75d + 48d54d8
commit 8631f27
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 3 deletions.
diff --git a/src/chart/helper/Symbol.js b/src/chart/helper/Symbol.js
@@ -238,7 +238,7 @@ symbolProto._updateCommon = function (data, idx, symbolSize, seriesScope) {
     }
     else {
         symbolPath.setStyle({
-            opacity: null,
+            opacity: 1,
             shadowBlur: null,
             shadowOffsetX: null,
             shadowOffsetY: null,
@@ -394,4 +394,4 @@ symbolProto.fadeOut = function (cb, opt) {
 
 zrUtil.inherits(SymbolClz, graphic.Group);
 
-export default SymbolClz;
+export default SymbolClz;
diff --git a/src/chart/tree/TreeView.js b/src/chart/tree/TreeView.js
@@ -637,4 +637,4 @@ function getEdgeShape(seriesScope, sourceLayout, targetLayout) {
         cpy2: cpy2
     };
 
-}
+}
diff --git a/test/tree-image2.html b/test/tree-image2.html
@@ -0,0 +1,98 @@
+
+<!--
+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/esl.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>
+        <link rel="stylesheet" href="lib/reset.css" />
+        <style>
+            #main {
+                height: 600px;
+            }
+            .test-chart {
+                height: 600px;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="main"></div>
+        <script>
+            require([
+                'echarts'
+            ], function (echarts) {
+                $.getJSON('./data/tree-simple.json', function (data) {
+
+                    var option = {
+                        tooltip: {
+                            trigger: 'item',
+                            triggerOn: 'mousemove'
+                        },
+                        series:[
+                            {
+                                type: 'tree',
+
+                                data: [data],
+                                roam: true,
+                                top: '2%',
+                                left: '7%',
+                                bottom: '1%',
+                                right: '20%',
+
+                                symbol: 'image://https://github.githubassets.com/images/icons/emoji/electron.png',
+
+                                symbolSize: 10,
+
+                                label: {
+                                    position: 'left',
+                                    verticalAlign: 'middle',
+                                    align: 'right'
+                                },
+
+                                leaves: {
+                                    label: {
+                                        position: 'right',
+                                        verticalAlign: 'middle',
+                                        align: 'left'
+                                    }
+                                },
+
+                                expandAndCollapse: true,
+                                animationDuration: 550,
+                                animationDurationUpdate: 750
+                            }
+                        ]
+                    };
+
+                    var chart = testHelper.create(echarts, 'main', {
+                        title: 'Fix the issue #12279 that symbols with image do not display at the first rendering',
+                        option: option
+                    });
+
+                });
+            });
+        </script>
+    </body>
+</html>
-Original file line number
+Diff line change
@@ Expand Up @@
             cpy2: cpy2
         };
-    }
+    }