关于 Echarts系列之如何实现让坐标固定交叉显示四个象限

本文链接：https://blog.csdn.net/weixin_43191327/article/details/123023552

正常情况只需要配置以下,即可实现, 因为正负值是相互对称的

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
       }