apache / apache/echarts

[Bug] IOS 上会多了一根横线 折线图 雷达图都有这个问题

Open
#18,679 5 comments 0 reactions 0 assignees View on GitHub
bug missing-demo pending waiting-for: author
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

5.4.2

### Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html?c=line-simple

### Steps to Reproduce

在ios设备上 13 13pro max 14 渲染折线图 会偶尔出现多一条横线的情况, android和pc没有这个问题

option配置
{
grid: {
left: '5%',
right: '5%',
bottom: '5%',
top: '5%',
containLabel: true
},
xAxis: {
type: 'category',
axisTick: {
show: false,
alignWithLabel: true // 保证刻度线和标签对齐
},
axisLine: {
show: false // 不显示坐标轴线
},
axisLabel: {
interval: dataX.length > 10 ? 2 : 0,
// interval: Math.trunc(dataX.length / 4),
textStyle: {
color: 'rgb(191, 191, 191)'
},
fontSize: 12,
margin: 0,
formatter: function(value) {
// value为传入方法的秒数
let m = Math.floor(value / 60)
let s = value % 60
// 正数
m = Math.abs(m)
s = Math.abs(s)
m += ''
s += ''
// 如果只有一位数,前面增加一个0
m = (m.length === 1) ? m : m
s = (s.length === 1) ? '0' + s : s
return m + ':' + s
}
},
data: dataX // x坐标的名称
},
yAxis: {
type: 'value',
offset: 10,
boundaryGap: true,
max: parseInt(Math.max.apply(null, opinionData) * 1.7),
interval: parseInt(Math.max.apply(null, opinionData) * 1.7) > 100 ? 20 : 10, // 强制设置坐标轴分割间隔
axisLabel: {
textStyle: {
color: 'rgb(191, 191, 191)'
},
fontSize: 12,
margin: 0
},
axisLine: {
show: false // 不显示坐标轴线
},
axisTick: {
show: false
// alignWithLabel: true // 保证刻度线和标签对齐
},
splitLine: {
show: false // 不显示网格线
}
},
series: [
{
name: '数值',
color: '#7294FD',
symbol: 'circle',
symbolSize: 1,
showAllSymbol: false,
type: 'line',
data: opinionData,
areaStyle: {
// 显示区域颜色---渐变效果
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#7294FD' // 0% 处的颜色
}, {
offset: 1,
color: '#ffffff' // 100% 处的颜色
}],
global: false // 缺省为 false
}
},
label: {
show: true,
position: 'top'
},
lineStyle: {
color: '#7294FD' // 改变折线颜色
},
itemStyle: {
color: 'rgb(125, 140, 241)', // 改变折线点的颜色
normal: {
label: {
show: true,
textStyle: {
color: '#7294FD',
fontWeight: 600,
fontSize: 10,
position: 'top' // 定位在拐点下面
// distance: 115 // 偏移量,举例拐点多少
} // 拐点文字样式
}
}
}
}]
}

### Current Behavior

![image](https://github.com/apache/echarts/assets/26161407/eb979daf-91a1-4a7f-83ba-665f42fb5053)
上下两个图标用的是同一个配置 但是一个会多一个横线 一个是正常的

### Expected Behavior

没有多出来的这条横线

### Environment

```markdown
- OS:IOS 15 16
- Browser: Safari
- Framework: vue
```

### Any additional comments?

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.