echarts 象形柱图有什么办法设置最小值不超过坐标轴区域?

const posList = [
  'left',
  'right',
  'top',
  'bottom',
  'inside',
  'insideTop',
  'insideLeft',
  'insideRight',
  'insideBottom',
  'insideTopLeft',
  'insideTopRight',
  'insideBottomLeft',
  'insideBottomRight'
];
app.configParameters = {
  rotate: {
    min: -90,
    max: 90
  },
  align: {
    options: {
      left: 'left',
      center: 'center',
      right: 'right'
    }
  },
  verticalAlign: {
    options: {
      top: 'top',
      middle: 'middle',
      bottom: 'bottom'
    }
  },
  position: {
    options: posList.reduce(function (map, pos) {
      map[pos] = pos;
      return map;
    }, {})
  },
  distance: {
    min: 0,
    max: 100
  }
};
app.config = {
  rotate: 90,
  align: 'left',
  verticalAlign: 'middle',
  position: 'insideBottom',
  distance: 15,
  onChange: function () {
    const labelOption = {
      rotate: app.config.rotate,
      align: app.config.align,
      verticalAlign: app.config.verticalAlign,
      position: app.config.position,
      distance: app.config.distance
    };
    myChart.setOption({
      series: [
        {
          label: labelOption
        },
        {
          label: labelOption
        },
        {
          label: labelOption
        },
        {
          label: labelOption
        }
      ]
    });
  }
};
const labelOption = {
  show: true,
  position: app.config.position,
  distance: app.config.distance,
  align: app.config.align,
  verticalAlign: app.config.verticalAlign,
  rotate: app.config.rotate,
  formatter: '{c}  {name|{a}}',
  fontSize: 16,
  rich: {
    name: {}
  }
};
option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['Forest', 'Steppe', 'Desert', 'Wetland']
  },
  toolbox: {
    show: true,
    orient: 'vertical',
    left: 'right',
    top: 'center',
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar', 'stack'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  xAxis: [
    {
      type: 'category',
      axisTick: { show: false },
      data: ['2012', '2013', '2014', '2015', '2016']
    }
  ],
  yAxis: [
    {
      type: 'value',
      max: 300,
      min:50,
     gridIndex: 0,
     
     interval: 25,
             axisTick: {
              show: false,
            },
      splitLine: {
              //网格线
              lineStyle: {
                // type: "solid", //设置网格线类型 dotted:虚线   solid:实线
                width: 0.7,
                color: "rgba(177, 253, 255, 0.1)",
              },

    }
    }
  ],
  series: [
    {
      name: 'Forest',
     type: 'pictorialBar',
       symbol: 'rect', //柱子的形状
         symbolOffset: [0, 0], //柱子的位置
      z:11,
      label: labelOption,
        barWidth:20,
      emphasis: {
        focus: 'series'
      },
      data: [320, 332]
    },
     {
      name: 'Forest',
          type: 'pictorialBar',
       symbol: 'rect', //柱子的形状
      symbolOffset: [-5, 0], //柱子的位置
       z:10,
      label: labelOption,
      color:'red',
        barWidth:30,
      emphasis: {
        focus: 'series'
      },
      data: [220, 132]
    },
    {
      name: 'Steppe',
         type: 'pictorialBar',
       symbol: 'rect', //柱子的形状
         symbolOffset: [25,0], //柱子的位置
          z:11,
            barWidth:20,
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [220, 182]
    },

  ]
};

可复制到echarts编辑器查看效果,主要是yAxis设置最小值后 (max: 300,min:50),出现越界,理想是不越界。

阅读 2.2k
1 个回答

把min 和max都去掉,换成scale
scale: true,

只在数值轴中(type: 'value')有效。

是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。

在设置 min 和 max 之后该配置项无效。

https://echarts.apache.org/zh...

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题