[矩形树图](treemap)存在upperLabel时，父级的borderColor属性设置无效

[xiaguangyu]

General Questions

Issue Type

• I have a question to ask about how to use ECharts to ...；我想提问如何使用 ECharts 实现某功能
• I have a bug to report；我想要报 bug
• I have a feature to request, e.g.: I'd like a new feature that ...；我需要一个新功能
• I have a feature to enhance, e.g.: The current feature should be improved in the way that ...；我希望改进某个功能
• There's something wrong with the documents；文档有些问题
• Others, or I'm not sure which issue types to choose here；其他，或我不知道应该选什么类型

Issue Details

存在多级数据时，比如两级时。动态改变第一级的样式itemStyle的borderColor属性，再重新setOption，会发现设置不生效。

Expected Behavior

动态设置第一级的borderColor属性，能实现borderColor颜色设置生效。

Current Behavior

当点击矩形树图的一级时，监听器click事件，然后对点击的一级区块的itemStyle设置borderColor和borderWidth，发现只有borderWidth生效。

Environment

• ECharts version；ECharts 4.2.0-rc.2

MyOption

var myChart = echarts.init(document.getElementById('main'));

        var getLevelOption = function(){
            return [
                {
                    itemStyle: {
                        borderWidth: 1,
                        gapWidth: 2
                    },
                    upperLabel: {
                        show: false
                    }
                }, {
                    itemStyle: {
                        borderWidth: 1,
                        gapWidth: 1
                    },
                    upperLabel: {
                        color: '#333',
                        fontSize: 12
                    }
                }
            ];
        };

        var treeData = [{
            name: "华东",
            value: 30,
            children: [{
                name: 'a',
                value: 1
            },{
                name: 'b',
                value: 2
            }]
        },{
            name: "华北",
            value: 25,
            children: [{
                name: 'a',
                value: 1
            },{
                name: 'b',
                value: 2
            }]
        },{
            name: "华中",
            value: 20,
            children: [{
                name: 'a',
                value: 1
            },{
                name: 'b',
                value: 2
            }]
        },{
            name: "西北",
            value: 15,
            children: [{
                name: 'a',
                value: 1
            },{
                name: 'b',
                value: 2
            }]
        },{
            name: "西南",
            value: 6,
            children: [{
                name: 'a',
                value: 1
            },{
                name: 'b',
                value: 2
            }]
        },{
            name: "东北",
            value: 6,
            children: [{
                name: 'a',
                value: 1
            },{
                name: 'b',
                value: 2
            }]
        }];

        var myOption = {
            title: {
                text: 'demo',
                left: 'center',
                show: false
            },
            series: [{
                name:'Disk Usage',
                type:'treemap',
                // visibleMin: 300,
                leafDepth: 2,
                upperLabel: {
                    normal: {
                        show: true,
                        color: '#333',
                        fontSize: 12
                    },
                    emphasis: {
                        show: true,
                        color: '#333',
                        fontSize: 12
                    }
                },
                label: {
                    normal: {
                        show: true,
                        color: '#333',
                        fontSize: 12,
                        lineHeight: 20,
                        ellipsis: true
                    },
                    emphasis: {
                        show: true,
                        color: '#333',
                        lineHeight: 20,
                        ellipsis: true
                    }
                },
                levels: getLevelOption(),
                data: treeData,
                breadcrumb: {
                    show: false
                }
            }]
        };

        myChart.setOption(myOption);
        myChart.on('click','series', function(param){
            var name = param.data.name;
            var curData = treeData.concat([]);
            for (let item of curData) {
                if (item.name === name) {
                    item.itemStyle = {
                        borderWidth: 3,
                        borderColor: '#ccc'
                    }
                } else {
                    if (item.itemStyle) {
                        delete item.itemStyle;
                    }
                }
            }
            let curOption = myChart.getOption();
            curOption.series[0].data = curData;
            console.log(curOption.series[0]);
            myChart.setOption(curOption,true);
        })

[github-actions]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[github-actions]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!