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

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

      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);

使用前的图形:
EChart 多y轴,X轴零点刻度线一致性通用函数_第1张图片
图上很明显, 两个y轴的零刻度线的位置是错开的(其中一条已经看不见了),
使用后的效果
EChart 多y轴,X轴零点刻度线一致性通用函数_第2张图片
使用后, 零刻度线已经一致了,并且图像的整体平衡性也比较好.

注:你要在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,
            .....
  );
        

在这里插入图片描述

maraSun 于虎年除夕前夜 HBBDZZ
再次预祝各味名猿们,虎年虎虎生威,阖家欢乐,幸福安康.

你可能感兴趣的:(软件开发,echarts,javascript,X轴零刻度线一致性通用代码,Echart)