apache / apache/echarts

[Bug] 仪表盘进度条末端样式不生效

Open
#19,392 2 comments 0 reactions 0 assignees View on GitHub
bug pending
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属性,但是设置后无效
![1](https://github.com/apache/echarts/assets/78083238/f0d67556-e965-4c94-ae3b-7692624c5a30)

### Expected Behavior

想要将仪表盘进度条末端自定义样式

### Environment

```markdown
- OS:
- Browser:
- Framework:
```

### Any additional comments?

_No response_

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.