解决Echarts中折线图出现的问题

一、设置y轴最小刻度值

原本y轴没有设置数据的话会自动生成的,但是在实际工作中遇到了问题

image-20221025103830110

在线用户不能为小数

所以最少要设置一个最小刻度

需要在yAxis中加入minInterval,如下:

1
2
3
4
5
6
7
8
9
10
11
yAxis : [
{
minInterval:1,
type : 'value',
axisLine:{
lineStyle:{
color:'#888888'
}
}
}
],

二、两个值相同却为曲线

在测试的时候就出现了这样的问题

image-20221025104219770

两个值相同,可为什么要弯曲一下

找了许多资料,只需要加入一个配置项就行了

在series中加入 smoothMonotone: ‘x’,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
series : [
{
smoothMonotone: 'x',
type:'line',
barWidth : 20,
smooth:true,
data:data.dataY[0],
//设置柱状图渐变颜色
itemStyle: {
normal: {
barBorderRadius:[6, 6, 0, 0], // 柱状图顶部圆角
color: new $.echarts.graphic.LinearGradient(
0, 0, 0, 1, // 1,0,0,0表示从左向右
[
{offset: 1, color: '#287AF6'},
{offset: 0, color: '#287AF6'}
]
)
}
}
},
]

解决Echarts中折线图出现的问题
https://tian-1-2.github.io/typblog/2022/10/25/20221025-解决Echarts中折线图出现的问题/
作者
田云鹏
发布于
2022年10月25日
许可协议