Skip to content

pictorialBar象形图设置symbolRepeat时,symbol之间间隔不一致 #17136

@Colin3191

Description

@Colin3191

Version

5.3.2

Link to Minimal Reproduction

https://codesandbox.io/s/bold-breeze-w07h9h?file=/src/index.js

Steps to Reproduce

<rect y="12" width="16" height="2" fill="black"/>
<rect y="8" width="16" height="2" fill="black"/>
<rect y="4" width="16" height="2" fill="black"/>
<rect width="16" height="2" fill="black"/>
</svg>
{
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'pictorialBar',
      symbolMargin: 0,
      symbolRepeat: true,
      symbolSize:'100%',
      barWidth: '60%',
      symbol:
        'image://data:image/svg+xml;base64,PHN2ZyBmaWxsPScjMjI3NkZDJyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZj0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeT0iMTIiIHdpZHRoPSIxNiIgaGVpZ2h0PSIyIiBmPSJibGFjayIvPgo8cmVjdCB5PSI4IiB3aWR0aD0iMTYiIGhlaWdodD0iMiIgZj0iYmxhY2siLz4KPHJlY3QgeT0iNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjIiIGY9ImJsYWNrIi8+CjxyZWN0IHdpZHRoPSIxNiIgaGVpZ2h0PSIyIiBmPSJibGFjayIvPgo8L3N2Zz4='
    }
  ]
}

option中设置的symbol是上面svg的base64格式

Current Behavior

symbol与symbol之间的间隙会随柱宽变化而变化
image
image

Expected Behavior

每个symbol之间有相同的间隙

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugdifficulty: easyIssues that can be fixed more easily than the average.staleInactive for a long time. Will be closed in 7 days.topic: pictorialBar

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions