树图使用图片symbol后，节点只有点击才会展示

[cpprookie]

Version

4.5.0

Steps to reproduce

打开官网树图demo https://echarts.apache.org/examples/zh/editor.html?c=tree-basic
替换内容为

myChart.showLoading();
const url = `data:image/svg xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 80 40" xml:space="preserve">
    <rect x="0" y="0" width="2px" height="100%" fill="%232DAFF9" />
    <rect  x="3" y="0" width="70px" height="100%" fill="%232DAFF9" />
</svg>`

$.get(ROOT_PATH + 'data/asset/data/flare.json', function (data) {
    myChart.hideLoading();

    echarts.util.each(data.children, function (datum, index) {
        index % 2 === 0 && (datum.collapsed = true);
    });

    const d = {
     "name": "flare",
     "value": "70人，80%",
     "children": [
      {
       "name": "analytics",
       "value": "70人，80%",
       "children": [
        {
         "name": "cluster",
         "children": [
          {"name": "AgglomerativeCluster", "value": 3938},
          {"name": "CommunityStructure", "value": 3812},
          {"name": "HierarchicalCluster", "value": 6714},
          {"name": "MergeEdge", "value": 743}
         ]
        },
        {
         "name": "graph",
         "children": [
          {"name": "BetweennessCentrality", "value": 3534},
          {"name": "LinkDistance", "value": 5731},
          {"name": "MaxFlowMinCut", "value": 7840},
          {"name": "ShortestPaths", "value": 5914},
          {"name": "SpanningTree", "value": 3416}
         ]
        },
        {
         "name": "optimization",
         "children": [
          {"name": "AspectRatioBanker", "value": 7074}
         ]
        }
       ]
      }]
    };

    myChart.setOption(option = {
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        series: [
            {
                type: 'tree',

                data: [d],

                top: '1%',
                left: '7%',
                bottom: '1%',
                right: '20%',
                symbol: `image://${url}`,
                symbolSize: [80, 40],
                itemStyle: {
                    color: '#2DAFF9',
                    borderWidth: 0,
                },
                label: {
                    normal: {
                        position: ['50%', '50%'],
                        verticalAlign: 'middle',
                        align: 'left',
                        fontSize: 9,
                        formatter: function(params) {
                            return `{name|${params.name}}\n${params.value}`
                        },
                        rich: {
                            name: {
                                color: '#fff',
                            },
                            
                        }
                    },
                    
                },

                expandAndCollapse: true,
                animationDuration: 550,
                animationDurationUpdate: 750
            }
        ]
    });
});

What is expected?

节点背景图片默认展示

What is actually happening?

节点背景图片初始不展示，点击后才会展示

[echarts-bot]

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to [email protected]. Please attach the issue link if it's a technical questions.

If you are interested in the project, you may also subscribe our mail list.

Have a nice day! 🍵

[russellxrs]

我也是这个问题，问下你解决了没？

[Paulwyg]

在最后加个myChart.resize()试试，加载完重新渲染

[cpprookie]

我也是这个问题，问下你解决了没？

没解决，最后自己画了

[deqingli]

Hi @cpprookie you should set symbol: '`image://${url}`'.

[cpprookie]

Hi @cpprookie you should set symbol: 'image://${url}'.

我更新了一下代码模版，之前少了一个逗号不能正常展示。而且，我的series 里已经设置了 symbol: image://${url}了呀