如下图，左右两边的Y轴线不在同一刻度上。
充电费及服务费堆积图.png
1.计算出Y轴左右两边最大值Max1与Max2
let spaceNum = 10; //间隔数（刻度）
function calMax(arr) {
//计算最大值
let maxA = Math.max(...arr); // 最大值A
let maxint = Math.ceil(maxA / spaceNum); //最大平均值（向上取整）= 最大值A / 间隔数
let maxB = maxint * spaceNum; // 最大值B = 最大平均值 * 间隔数 （注：最大值B>最大值A）
return Math.max(maxB, 10); // 为了防止maxB数据为0时，Y轴不显示，给个默认最大值10
}
let Max1, Max2;
Max1 = calMax([40,60,30,30,30]);
Max2 = calMax([0.2,0.12,0.18,0.8,0.28]);
2.设置Y轴
yAxis: [
{
name: '费用（单位：万元）',
type: 'value',
min: 0,
max: 0,
interval: 0,
axisLabel: {
//formatter: '{value} 万元'
}
},
{
type: 'value',
name: '环比上升率%',
min: 0,
max: 0,
interval: 0,
axisLabel: {
//formatter: '{value} %'
}
}
]
yAxis[0].max = Max1;//设置左侧最大值
yAxis[1].max = Max2;//设置右侧最大值
//注：左右Y轴的最大值，必须同时平均N（10）份，才能保持刻度在同一水平线上
yAxis[0].interval = Max1 / spaceNum;//设置左侧刻度间隔距离，平均为10份
yAxis[1].interval = Max2 / spaceNum;//设置右侧刻度间隔距离，平均为10份
//另一种更加完善的写法（推荐）
yAxis: [
{
type: "value",
name: "用量",
splitLine: { show: true, lineStyle: { color: "#003a87" } },
nameTextStyle: {
color: "#a4a7aa",
fontSize: "0.12rem",
},
axisLine: {
show: true,
lineStyle: {
color: "#003a87",
},
},
axisLabel: {
color: "#a4a7aa",
fontSize: "0.12rem",
},
//下面才是左右刻度等分的核心代码（interval、min、max）
interval: 100,
min: (value) => value.min > 0 ? 0 : value.min,
max: (value) => {
//刻度分割成5等份。注意：yAxis[0]下标，vue2的箭头函数的this指向实例（vue3语法不是用this）
let { max, min } = value;
if (min < 0) max = max - min;
let interval = Math.ceil(max / 5); //向上取整(五分之一)
if (interval != this.option.yAxis[0].interval) {
//没这个条件，会进入死循环
this.option.yAxis[0].interval = interval;
}
return min < 0 ? interval * 5 + min : interval * 5;
},
},
{
type: "value",
name: "环比",
splitLine: { show: true, lineStyle: { color: "#003a87" } },
nameTextStyle: {
color: "#a4a7aa",
fontSize: "0.12rem",
},
axisLine: {
show: true,
lineStyle: {
color: "#003a87",
},
},
axisLabel: {
color: "#a4a7aa",
fontSize: "0.12rem",
},
//下面才是左右刻度等分的核心代码（interval、min、max）
interval: 100,
min: (value) => value.min > 0 ? 0 : value.min,
max: (value) => {
//刻度分割成5等份。注意：yAxis[1]下标，vue2的箭头函数的this指向实例（vue3语法不是用this）
let { max, min } = value;
if (min < 0) max = max - min;
let interval = Math.ceil(max / 5); //向上取整(五分之一)
if (interval != this.option.yAxis[1].interval) {
//没这个条件，会进入死循环
this.option.yAxis[1].interval = interval;
//this.option.dataZoom.start = this.$refs.JEcharts.myChart.getOption().dataZoom[0].start; //Vue解决修改yAxis后dataZoom位置重置的问题
}
return min < 0 ? interval * 5 + min : interval * 5;
},
},
],
修改后效果图如下：
充电费及服务费堆积图.png
上面的代码也稍有不足的地方：如果一个数组，所有值都小于1，Y轴刻度将为最大值10【Math.max(maxB, 10)】，这样数据就展示就不够明显。代码可以根据业务自己再优化，上面的代码兼容到小1的情况，逻辑就会稍复杂些。
