apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.2k stars 19.61k forks source link

[Bug] 树状图根据节点属性设置节点边框颜色,粗细等 #19665

Open hantongyou opened 6 months ago

hantongyou commented 6 months ago

Version

5.4.3

Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html?c=tree-vertical

Steps to Reproduce

1.我使用的是自定义的数据,但是数据格式和官网示例的数据结构保持一致; 2.对于其中每一个数据项我设置了一个属性用以自定义节点边框样式,通过设置如下的itemStyle配置项:

...
itemStyle: {  

                        borderColor: function(params){
                            if(params.data.value>10)
                            return "red";
                            else return "green";
                        }

                }
...

3.在我尝试失败之后,我试图打印params,但是并没有任何东西被打印,同时如果我直接在borderColor中return "red"也并没有成功修改样式,这是为什么?为了达成自定义样式的效果我应该如何做?

Current Behavior

渲染树状图节点时自定义修改节点边框样式失效

Expected Behavior

可以根据节点属性值自定义节点边框样式

Environment

- OS:windows 11
- Browser:Chrome 122.0.6261.70
- Framework:React@18.2

Any additional comments?

No response

echarts-bot[bot] commented 6 months ago

@hantongyou It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED
**TITLE** [Bug] Treemap sets node border color, thickness, etc. based on node properties **BODY** ### Version 5.4.3 ### Link to Minimal Reproduction https://echarts.apache.org/examples/zh/editor.html?c=tree-vertical ### Steps to Reproduce 1. I use custom data, but the data format is the same as the data structure of the official website example; 2. For each of these data items, I set a property to customize the node border style, by setting the following itemStyle configuration item: ```javascript ... itemStyle: { borderColor: function(params){ if(params.data.value>10) return "red"; else return "green"; } } ... ``` 3. After I tried to print params, but nothing was printed, and if I returned "red" directly in borderColor, I didn't succeed in modifying the style, why? ### Current Behavior When rendering a treemap node, the custom modification of the node border style is invalid ### Expected Behavior You can customize the node border style based on the node property values ### Environment ```markdown - OS:windows 11 - Browser:Chrome 122.0.6261.70 - Framework:React@18.2 ``` ### Any additional comments? _No response_
helgasoft commented 6 months ago

API says tree.itemStyle.borderColor can be set to a value, not to a function. See #19606 for customizing trees.

hantongyou commented 6 months ago

API says tree.itemStyle.borderColor can be set to a value, not to a function. See #19606 for customizing trees.

Thanks, but according to the demo, it can only customizing tree labels but not the nodes' border or nodes color?