echarts [Feature] Support border radius for backgroundColor image

l0oc07j2 于 5个月前发布在 Echarts

关注(0)|答案(6)|浏览(55)

Version

5.5

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=treemap-simple&code=PYBwLglsB2AEC8sDeAoWsDOBTAThLGAXLANprrLkWxgCeIWxA5GDllgLYCGITANFQoATLmC7Ey1aqilToXDo1hNowIVgCC_QbIBuXADYBXJQEYADANnUAxgAsIBoW2gSd1mddnzFzVeo0ubS89QxNiABZ3WQBfKxD0TwT0HyUVNU0AI2Dk9H1jJQA2aKkYkvQAXRK4kqTrVL8MgCEcr3zw2AAmS3LYe0dnLFdSXsTRigblfywmoPjc9qVu-eT-pxc3XOlx7wU06dnTVq28sKXzHYoyk6rc65Db63vqCpX0Ay5MrANiOuoAM2AOG4YDAuGI_yM0BskBgsAAFABKSgJNhgIw4OAAIiQEA4AHMAD4xLHVN4UPD2X7jPH46knTJcGwAa3xOGAUKEAGFgAYgfSTrA8Vx8Wk7KCQEQAPRSjAAZgAtBhaBxMryFXz8cAAHSsLhCCDQfG6fAAd21NmAHClbAMEC40KwCsNQiMGFY9oMzug_xwXHdOCMMIxWG1GF0-OOCRqJzsWAg-PFxAArD0TqaIEIwHYU2mtmqcOocAAlfUQN3ETrJ8bPJ7uWv3KoxADcQA

Steps to Reproduce

Run the given reporduction link or check this code

option = {
  series: [
    {
      type: 'treemap',
      data: [
        {
          name: 'nodeA',
          value: 10,
          children: [
            {
              name: 'nodeAa',
              value: 4
            },
            {
              name: 'nodeAb',
              value: 6
            }
          ]
        },
        {
          name: 'nodeB',
          value: 20,
          children: [
            {
              name: 'nodeBa',
              value: 20,
              children: [
                {
                  name: 'nodeBa1',
                  value: 20
                }
              ]
            }
          ]
        }
      ],
      label: {
        formatter: function () {
          return "{img|}"
        },
        rich: {
            img: {
              backgroundColor: {
                image: 'https://s3-symbol-logo.tradingview.com/reliance-industrial-infrastructure.svg',
              },
              height: 50,
              width: 50,
              borderRadius: 25
            }
          }
      }
    }
  ]
};

Current Behavior

Currently when set borderRadius, it not doing anything when backgroundColor is image

Expected Behavior

Image should have border radius.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

echarts

来源：https://github.com/apache/echarts/issues/20130

6条答案

按热度按时间

9ceoxa921#

This is not a bug but it might be supported in the future. Similar to #13929 .

赞(0）回复(0）举报 5个月前

qmb5sa222#

@plainheart
Is there any work around for this?
Bdw it's not a good idea to close issues without providing any alternative or work around for the issue.

Echarts have very good potential but because of lack of good communities or support from developers, this library is lagging behind from other libraries like highcharts.

赞(0）回复(0）举报 5个月前

osh3o9ms3#

I closed it as it's a duplicate of known issues. I consider this as a feature that may be get supported in the future. StackOverflow is a good choice if you hope to get potential alternatives or more help. Issue list is originally for bug tracking and feature request. It's not a help center.

赞(0）回复(0）举报 5个月前

41ik7eoe4#

@plainheart ,
It's obvious that when we ask for alternatives or work around in issue, we mean alternative and work around solution available in echarts. That's also we are asking here because we have invested time to build something using this library.
The way you response clearly shows how unsupportive the community is.

Anyways thanks for your response.

赞(0）回复(0）举报 5个月前

irlmq6kh5#

I'm sorry what I did makes you feel that the community is unsupportive. After debugging I can see that I've made a wrong triage for this issue, it's not similar to #13929 and instead, it can be an issue of documentation. The current underlying implementation does not support setting a border radius for an image element, but I will look into it and try to support this feature in the next version 5.5.2.

Demo for Debugging

赞(0）回复(0）举报 5个月前

ma8fv8wu6#

possible duplicate of #12689 , #12894

赞(0）回复(0）举报 5个月前