Merge pull request #506 from apache/codex/fix-tree-emptycircle-docs

[codex] clarify tree emptyCircle itemStyle docs

Author: Justin-ZS

en/option/series/tree.md

@@ -109,7 +109,7 @@ This is the position where the polyline branches in the subtree when the shape o
 
 Subtree collapses and expands interaction, `default true`. As the drawing area is limited, and usually the nodes of a tree may be more, so there will be hidden between the nodes. In order to avoid this problem, you can put a temporary unrelated subtree folded away, until you need to start when necessary. Such as the above radial layout tree example, the center of the node is filled with blue is the folded away subtree, you can click to expand it.
 
-**Note: If you configure a custom image as the tag for a node, it is not possible to distinguish whether the current node has a collapsed subtree by the fill color. And currently do not support, upload two pictures, respectively represent the collapsing and expansion state of the node. So, if you want to explicitly show the two states of the node, it is recommended to use `ECharts` regular tag types, such as `emptyCircle`.**
+**Note: The default node symbol is `'emptyCircle'`. With this symbol, the inner fill is used to indicate whether a node has a collapsed subtree, while the outer ring follows [itemStyle.color](~series-tree.itemStyle.color). If you configure a custom image as the node symbol, ECharts can not switch the visual state by changing that inner fill, and currently does not support providing two different images for collapsed and expanded states automatically. So, if you want to explicitly show the two states of the node, it is recommended to use a built-in symbol type such as `'emptyCircle'`.**
 
 ## initialTreeDepth(number) = 2
 
@@ -119,7 +119,15 @@ The initial level (depth) of the tree. The root node is the 0th layer, then the
 
 ## itemStyle(Object)
 
-The style of each node in the tree, where [itemStyle.color](~series-tree.itemStyle.color) represents the fill color of the node, to distinguish the state of the subtree corresponding to `collapsing` or `expansion`.
+The style of each node in the tree.
+
+By default, `series.tree` uses the hollow symbol `'emptyCircle'`. With that symbol:
+
++ [itemStyle.color](~series-tree.itemStyle.color) controls the outline color of the node.
++ The inner fill is used to indicate whether the node has a collapsed subtree.
++ [itemStyle.borderColor](~series-tree.itemStyle.borderColor) and [itemStyle.borderWidth](~series-tree.itemStyle.borderWidth) do not affect the outer ring in the same way as they do for solid symbols.
+
+If you want [itemStyle.color](~series-tree.itemStyle.color) to behave as the normal fill color, and use [itemStyle.borderColor](~series-tree.itemStyle.borderColor) / [itemStyle.borderWidth](~series-tree.itemStyle.borderWidth) as the border style, set [symbol](~series-tree.symbol) to a solid symbol such as `'circle'`.
 
 {{ use: partial-item-style(
     prefix = "##",

zh/option/series/tree.md

@@ -151,7 +151,7 @@ const option = {
 
 子树折叠和展开的交互，`默认打开` 。由于绘图区域是有限的，而通常一个树图的节点可能会比较多，这样就会出现节点之间相互遮盖的问题。为了避免这一问题，可以将暂时无关的子树折叠收起，等到需要时再将其展开。如上面径向布局树图示例，节点中心用蓝色填充的就是折叠收起的子树，可以点击将其展开。
 
-**注意：如果配置自定义的图片作为节点的标记，是无法通过填充色来区分当前节点是否有折叠的子树的。而目前暂不支持，上传两张图片分别表示节点折叠和展开两种状态。所以，如果想明确地显示节点的两种状态，建议使用 `ECharts` 常规的标记类型，如 `'emptyCircle'` 等。**
+**注意：节点默认使用 `'emptyCircle'` 这个空心标记。在这种默认标记下，节点中心的填充色用于表示当前节点是否还有已折叠的子树，而节点外圈颜色由 [itemStyle.color](~series-tree.itemStyle.color) 控制。如果配置自定义图片作为节点标记，ECharts 无法再通过这个中心填充色来切换折叠/展开状态，目前也不支持自动为折叠和展开状态分别指定两张不同图片。所以，如果希望明确显示节点的两种状态，建议使用 `'emptyCircle'` 这类内置标记类型。**
 
 ## initialTreeDepth(number) = 2
 
@@ -161,7 +161,15 @@ const option = {
 
 ## itemStyle(Object)
 
-树图中每个节点的样式，其中 [itemStyle.color](~series-tree.itemStyle.color) 表示节点的填充色，用来区别当前节点所对应的子树折叠或展开的状态。
+树图中每个节点的样式。
+
+默认情况下，`series.tree` 使用的是空心标记 `'emptyCircle'`。在这种标记下：
+
++ [itemStyle.color](~series-tree.itemStyle.color) 控制的是节点外圈颜色。
++ 节点中心的填充色用于表示当前节点是否还有已折叠的子树。
++ [itemStyle.borderColor](~series-tree.itemStyle.borderColor) 和 [itemStyle.borderWidth](~series-tree.itemStyle.borderWidth) 不会像实心标记那样直接控制外圈边框。
+
+如果希望 [itemStyle.color](~series-tree.itemStyle.color) 表现为常规填充色，并使用 [itemStyle.borderColor](~series-tree.itemStyle.borderColor) / [itemStyle.borderWidth](~series-tree.itemStyle.borderWidth) 来控制边框样式，可以将 [symbol](~series-tree.symbol) 设置为 `'circle'` 这类实心标记。
 
 {{ use: partial-item-style(
     prefix = "##",