Echarts的双y轴0刻度对齐问题

77 阅读 0 评论 51 点赞

我是靠谱客的博主野性水杯，这篇文章主要介绍Echarts的双y轴0刻度对齐问题，现在分享给大家，希望可以做个参考。

双y轴0刻度的对齐核心是y轴最大最小值的设置。

百度的方法大部分是这样的：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: [{
type: 'value',
max: function(value) {
if(Math.abs(value.max) > Math.abs(value.min)){
return (Math.abs(value.max)*1.2).toFixed(2);
}else{
return (Math.abs(value.min)*1.2).toFixed(2);
}
},
min: function(value) {
if(Math.abs(value.max) > Math.abs(value.min)){
return (-Math.abs(value.max) * 1.2).toFixed(2);
}else{
return (-Math.abs(value.min) * 1.2).toFixed(2);
}
}
},
{
type: 'value',
max: function(value) {
if(Math.abs(value.max) > Math.abs(value.min)){
return (Math.abs(value.max)*1.2).toFixed(2);
}else{
return (Math.abs(value.min)*1.2).toFixed(2);
}
},
min: function(value) {
if(Math.abs(value.max) > Math.abs(value.min)){
return (-Math.abs(value.max) * 1.2).toFixed(2);
}else{
return (-Math.abs(value.min) * 1.2).toFixed(2);
}
}
}],
series: [{
data: [120, 200, -150, 80, 70, -110, 130],
type: 'bar',
yAxisIndex: 1
},
{
data: [120, 200, 150, 80, -70, 110, -130],
type: 'bar'
}]
}

然而我用了没效果，可能是我的其它配置的地方影响了，于是自己想出另一种解决办法：

我的场景是这样的：左边的轴是金额，右边是百分比，最大是100%，最小是0，

思路是：1、求出第一条轴数据的最大，最小值，并设置成y轴最大、最小值（产品要求Y轴的最大最小值根据数据取）

2、两条轴的splitNumber设置成相等

3、第二条轴的最大值设为100，最小值为ymin/ymax*100，作用是若第一条轴的最小值小于0，第二条轴的就会在0刻度之后加上等比长度的刻度。

效果图如下：

复制代码

yAxis: [{
name: "千万元",
type:'value',
nameTextStyle: {
fontSize: 15 * wPercent
},
show: true,
min: ymin,
max: ymax,
splitNumber: 5,
splitLine: {
show: false
},
axisLine: {
show: true,
symbol: ['none', 'arrow'],
symbolSize: [5 * wPercent, 10 * wPercent],
lineStyle: {
width: wPercent,
}
},
axisTick: {
show: false
},
axisLabel: {
margin: 5 * wPercent,
formatter: function (value) {
if (value > 0) {
value = Math.ceil(value / 1000);
return value;
} else {
value = Math.floor(value / 1000);
return value;
}
},
textStyle: {
color: "#23405F",
fontSize: 15 * wPercent,
}
}
},
{
name: "完成率",
type:'value',
nameLocation: "end",
show: true,
nameGap: 20,
nameTextStyle: {
fontSize: 15 * wPercent
},
splitLine: {
show: false
},
axisLine: {
show: false,
},
axisTick: {
show: false
},
max: 100,
min: ymin/ymax*100,
splitNumber: 5,
//interval: (ymax-ymin)/5,
axisLabel: {
margin: 5*wPercent,
formatter: function (value) {
if (value > 0) {
value = Math.ceil(value*10);
return value/10+'%';
} else {
value = Math.floor(value*10);
return value/10+'%';
}
},
textStyle: {
color: "#23405F",
fontSize: 15 * wPercent,
}
},
}
],

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 yAxis: [{
name: "千万元",
type:'value',
nameTextStyle: {
fontSize: 15 * wPercent
},
show: true,
min: ymin,
max: ymax,
splitNumber: 5,
splitLine: {
show: false
},
axisLine: {
show: true,
symbol: ['none', 'arrow'],
symbolSize: [5 * wPercent, 10 * wPercent],
lineStyle: {
width: wPercent,
}
},
axisTick: {
show: false
},
axisLabel: {
margin: 5 * wPercent,
formatter: function (value) {
if (value > 0) {
value = Math.ceil(value / 1000);
return value;
} else {
value = Math.floor(value / 1000);
return value;
}
},
textStyle: {
color: "#23405F",
fontSize: 15 * wPercent,
}
}
},
{
name: "完成率",
type:'value',
nameLocation: "end",
show: true,
nameGap: 20,
nameTextStyle: {
fontSize: 15 * wPercent
},
splitLine: {
show: false
},
axisLine: {
show: false,
},
axisTick: {
show: false
},
max: 100,
min: ymin/ymax*100,
splitNumber: 5,
//interval: (ymax-ymin)/5,
axisLabel: {
margin: 5*wPercent,
formatter: function (value) {
if (value > 0) {
value = Math.ceil(value*10);
return value/10+'%';
} else {
value = Math.floor(value*10);
return value/10+'%';
}
},
textStyle: {
color: "#23405F",
fontSize: 15 * wPercent,
}
},
}
],