正常情况只需要配置以下,即可实现, 因为正负值是相互对称的
xAxis: [{
min: 4,
max: -4
}],
yAxis: [{
min: 4,
max: -4
}],
如果是下面这种就需要计算得来, 所有的最小值都是从零开始, 无法达到对称数值就要使用 offset 属性来调整坐标轴的位置。
需要注意的是下面的线的
offset
属性能够调整的距离会受到splitNumber
属性限制, 图片上的分割线就是由这个属性来决定的, 轴线值为 100,splitNumber
为10, 就会有10条分割线, 你的坐标轴就会处于其中一条线左右
xAxis: [{
splitNumber: 10, // 这个地方决定你的线是否能够居中
offset: 0, // 计算得来
max: 2,
}],
// y 轴同理
2022/2/19 接下来的心得都是围绕上边开展的
- x 轴问题
当需要通过offset
属性调整 x 轴的位置时, 需要配合onZero
属性, 不然可能会导致轴线和刻度数不在一起, 并且会导致轴线的最高只能处于居中的位置。比如 y 轴是 0-10, x 轴最高只能到 5 的位置, 下面是关闭onZero
属性的代码
xAxis: [
{
type: 'value',
boundaryGap: false,
axisTick: {
show: false
},
offset: -170,
axisLine: {
onZero: false //X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上,只有在另一个轴为数值轴且包含 0 刻度时有效。
}
}
],
2. y轴属性
这里默认有两个 x 轴
主要是 onZeroAxisIndex 解释: 当有双轴时,可以用这个属性手动指定,在哪个轴的 0 刻度上。下面的代码配置了 y 轴在第一个 x 轴的 0 刻度上显示。
yAxis: {
axisTick: {
show: false
},
axisLine: {
onZeroAxisIndex: 0
}
// offset: -1000
}
效果图:
现在设置 onZeroAxisIndex: 1
效果图2(用来对比):