EChart 多y轴,X轴零点刻度线一致性通用函数

MaraSun

已于 2022-08-20 18:07:26 修改

阅读量2k

点赞数

分类专栏：软件开发文章标签： echarts javascript X轴零刻度线一致性通用代码 Echart

于 2022-01-30 23:44:20 首次发布

本文链接：https://blog.csdn.net/Uman/article/details/122757139

版权

软件开发专栏收录该内容

125 篇文章 2 订阅

订阅专栏

思路已经在本人的上一篇小文章简述过了,不再赘述. 直接上代码

      function AdjustXAxisPosition(op) {
        var yAxis = op.yAxis;
        var min, max;
        nmlMin = 1;// normalization of min 
        nmlMax = -1;
        var yH = new Array(yAxis.length);
        for (i = 0; i < yAxis.length; i++) {
          // normalization ...
          min = yAxis[i].min;
          max = yAxis[i].max;
          yH[i] = max - min;

          if (yH[i] <= 0) {
            return op;
          }
          min = min / yH[i];
          max = max / yH[i];
          if (nmlMin > min) { nmlMin = min }
          if (nmlMax < max) { nmlMax = max }

        }
        // reset the min and max of each yAxis .
        for (i = 0; i < yAxis.length; i++) {
          yAxis[i].min = nmlMin * yH[i];
          yAxis[i].max = nmlMax * yH[i];

        }
        return op;
      }

使用方法,

		......
 	   option = AdjustXAxisPosition(option);
     
      myChart.setOption(option);

使用前的图形:
在这里插入图片描述
图上很明显, 两个y轴的零刻度线的位置是错开的(其中一条已经看不见了),
使用后的效果

使用后, 零刻度线已经一致了,并且图像的整体平衡性也比较好.

注：你要在Y轴的属性中加入最大值和最小值才能生效，否则echart 会自己计算最大值最小值，这样上面的函数就无效了。
例如，要有下列类似代码：

       option.yAxis.push({

            splitLine: {
              show: false
            },
            type: 'value',
            yAxisIndex: yAxisIndex,
            name: YAxisName, //jfDat.y[i].name,
            nameTextStyle: {
              fontSize: axisFontSize
            },
            min: min - (max - min) * 0.05,
            max: max + (max - min) * 0.05,
            .....
  );