[Bug] 仪表盘进度条末端样式不生效
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 11d 14h
- Merged PRs (30d)
- 8
Description
### Version
5.4.3
### Link to Minimal Reproduction
borderCap: 'square'
### Steps to Reproduce
option = {
series: [
{
type: 'gauge',
center: ['50%', '60%'],
radius: '64%',
startAngle: 270,
endAngle: -90,
splitNumber: 4,
min: 0,
max: 80,
itemStyle: {
color: '#FFAB91',
borderColor: '#fff',
shadowColor: 'rgb(241, 234, 224)',
shadowBlur: 15,
shadowOffsetY: 5
},
progress: {
show: true,
width: 1,
itemStyle: {
width: 1,
color: 'rgb(241, 234, 224)'
}
},
pointer: {
show: false
},
axisLine: {
lineStyle: {
width: 1,
color: [
[1 / 8, '#fff'],//根据实际数据动态改变
[7 / 8, 'rgb(227, 227, 227)'],
[1, '#fff']
]
}
},
axisTick: {
distance: -45,
splitNumber: 10,
lineStyle: {
width: 2,
color: 'auto'
}
},
splitLine: {
distance: -55,
length: 15,
lineStyle: {
width: 3,
color: 'auto'
}
},
axisLabel: {
distance: -60,
color: '#999999',
fontSize: 20,
formatter: function (value) {
console.log('value', value)
return value + '℃'
},
},
detail: {
show: false
},
data: [
{
value: 80
}
]
},
{
type: 'gauge',
center: ['50%', '60%'],
startAngle: 225,
endAngle: -45,
min: 0,
max: 1,
radius: '75%',
itemStyle: {
color: '#FFAB91'
},
progress: {
show: true,
type: 'linear',
width: 30,
itemStyle: {
// color: new echarts.graphic.RadialGradient(0.2, 1, 1, [
// {
// offset: 1,
// color: 'rgb(246, 215, 178)'
// },
// {
// offset: 0,
// color: 'rgb(255, 247, 234)'
// }
// ]),
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{
offset: 1,
color: 'rgb(255, 246, 237)'
},
{
offset: 0.5,
color: 'rgb(254, 244, 232)'
},
{
offset: 0,
color: 'rgb(248, 213, 177)'
}
])
},
},
pointer: {
show: false
},
axisLine: {
lineStyle: {
width: 30,
color: [
[0.5, 'rgb(254, 244, 232)'],
[1, 'rgb(255, 246, 237)']
]
}
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
detail: {
show: false
},
data: [
{
value: 100
}
]
},
{
type: 'gauge',
center: ['50%', '60%'],
startAngle: 225,
endAngle: -45,
min: 10,
max: 70,
splitNumber: 4,
itemStyle: {
color: '#FF8400'
},
progress: {
show: true,
width: 8,
itemStyle: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
{
offset: 0,
color: '#FF8400'
},
{
offset: 1,
color: '#F4E1CD'
}
]),
borderCap: 'square'
},
},
pointer: {
show: false
},
axisLine: {
lineStyle: {
width: 30
}
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
detail: {
valueAnimation: true,
width: '60%',
lineHeight: 40,
borderRadius: 8,
offsetCenter: [0, '-15%'],
fontSize: 60,
fontWeight: 'bolder',
formatter: function (value) {
console.log('value', value)
return value + '℃'
},
color: 'inherit'
},
data: [
{
value: 20
}
]
}
]
};
setInterval(function () {
const random = +(Math.random() * 80).toFixed(2);
myChart.setOption({
series: [
{
data: [
{
value: 80
}
]
},
{
data: [
{
value: 100
}
]
},
{
data: [
{
value: random
}
]
},
]
});
}, 2000);
### Current Behavior
仪表盘进度条末端样式有borderCap属性,但是设置后无效

### Expected Behavior
想要将仪表盘进度条末端自定义样式
### Environment
```markdown
- OS:
- Browser:
- Framework:
```
### Any additional comments?
_No response_
Contributor guide
Research direction
Start by reproducing the reported gauge configuration from the issue, focusing on the third gauge's progress.itemStyle.borderCap setting. No source file or test is named, so locate the gauge progress rendering entry point and compare the rendered end cap with the requested square style. Done means the setting visibly changes the progress-bar end shape without breaking other gauge rendering.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100