Echarts的双y轴0刻度对齐问题

双y轴0刻度的对齐核心是y轴最大最小值的设置。

百度的方法大部分是这样的:

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: [{
        type: 'value',
        max: function(value) {
            if(Math.abs(value.max) > Math.abs(value.min)){
                return (Math.abs(value.max)*1.2).toFixed(2);
            }else{
                return (Math.abs(value.min)*1.2).toFixed(2);
            }
        },
        min: function(value) {
            if(Math.abs(value.max) > Math.abs(value.min)){
                return (-Math.abs(value.max) * 1.2).toFixed(2);
            }else{
                return (-Math.abs(value.min) * 1.2).toFixed(2);
            }
        }
    },
    {
        type: 'value',
        max: function(value) {
            if(Math.abs(value.max) > Math.abs(value.min)){
                return (Math.abs(value.max)*1.2).toFixed(2);
            }else{
                return (Math.abs(value.min)*1.2).toFixed(2);
            }
        },
        min: function(value) {
            if(Math.abs(value.max) > Math.abs(value.min)){
                return (-Math.abs(value.max) * 1.2).toFixed(2);
            }else{
                return (-Math.abs(value.min) * 1.2).toFixed(2);
            }
        }
    }],
    series: [{
        data: [120, 200, -150, 80, 70, -110, 130],
        type: 'bar',
        yAxisIndex: 1
    },
    {
        data: [120, 200, 150, 80, -70, 110, -130],
        type: 'bar'
    }]

}

然而我用了没效果,可能是我的其它配置的地方影响了,于是自己想出另一种解决办法:

我的场景是这样的:左边的轴是金额,右边是百分比,最大是100%,最小是0,

思路是:1、求出第一条轴数据的最大,最小值,并设置成y轴最大、最小值(产品要求Y轴的最大最小值根据数据取)

              2、两条轴的splitNumber设置成相等

              3、第二条轴的最大值设为100,最小值为ymin/ymax*100,作用是若第一条轴的最小值小于0,第二条轴的就会在0刻度之后加上等比长度的刻度。

效果图如下:

 

 

 

 yAxis: [{
              name: "千万元",
              type:'value',
              nameTextStyle: {
                fontSize: 15 * wPercent
              },
              show: true,
            min: ymin,
            max: ymax,
            splitNumber: 5,
              splitLine: {
                show: false
              },
              axisLine: {
                show: true, 
                symbol: ['none', 'arrow'],
                symbolSize: [5 * wPercent, 10 * wPercent],
                lineStyle: {
                  width: wPercent,
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                margin: 5 * wPercent,
                formatter: function (value) {
                  if (value > 0) {
                    value = Math.ceil(value / 1000);
                    return value;
                  } else {
                    value = Math.floor(value / 1000);
                    return value;
                  }
                },
                textStyle: {
                  color: "#23405F",
                  fontSize: 15 * wPercent,
                }
              }
            },
            {
              name: "完成率",
              type:'value',
              nameLocation: "end",
              show: true,
              nameGap: 20,
              nameTextStyle: {
                fontSize: 15 * wPercent
              },
              splitLine: {
                show: false
              },
              axisLine: {
                show: false,
               
              },
              axisTick: {
                show: false
              },
              max: 100,
              min: ymin/ymax*100,
              splitNumber: 5,
              //interval: (ymax-ymin)/5,
              axisLabel: {
                margin: 5*wPercent,
                formatter: function (value) {
                  if (value > 0) {
                    value = Math.ceil(value*10);
                    return value/10+'%';
                  } else {
                    value = Math.floor(value*10);
                    return value/10+'%';
                  }
                },
                textStyle: {
                  color: "#23405F",
                  fontSize: 15 * wPercent,
                }
              },
            }

          ],

 

你可能感兴趣的:(Echarts的双y轴0刻度对齐问题)