min/max on yAxis for bar charts, makes the bars go outside limits

One-line summary [问题简述]

Setting custom min/max values on the yAxis for bar charts, makes the bars go below the lowest limit of x axis and above the highest limit of y axis.

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]: 4.1.0
• Browser version [浏览器类型和版本]: 68.0.3440.84
• OS Version [操作系统类型和版本]: macOS High Sierra 10.13.3

Expected behaviour [期望结果]

Without min/max on bar chart I get,

When I set min/max on bar chart I get,

I do not face this issue if I change the chart type to line,

Line without min/max:

Line with min/max:

What can I do to make min/max for bar behave like line ? Is there some way I can prevent the bars from going outside limits ?

ECharts option [ECharts配置项]

option = {
    xAxis: {
        type: 'category',
        data: ['Foo', 'Bar', 'Baz']
    },
    yAxis: {
        type: 'value',
        min: 200,
        max: 250
    },
    series: [{
        data: [100, 200, 300],
        type: 'line' // 'bar'
    }]
};

[suremicro]

You example doesn’t include the layout clipping function??? You need to add the function and register it using the global echarts function. If you try the code below in your jsfiddle example it will clip the bars 😉

echarts.registerLayout(chartLayout);
var container = document.getElementById('main');
var chart = echarts.init(container);

const min = "2020-11-25T06:10";
const max = "2020-11-25T08:10";
function getData() {
      const data = [];
      let now = +new Date(2020, 10, 25);
      const oneDay = 10 * 60 * 1000;
      const randomData = ()=> {
        now = new Date(+now + oneDay);
        return {
          value: [
            now.toISOString().substring(0,16),
            Math.floor(Math.random() * 100),
          ],
        };
      };
      for (let i = 0; i < 72; i++) {
        data.push(randomData());
      }
      return data;
}

            function chartLayout(ec) {

                ec.eachSeries(seriesComponent => {

                    var data = seriesComponent.getData();

                    data.each(idx => {

                        var layout = data.getItemLayout(idx);

                        if (layout) {

                            var rect = seriesComponent.coordinateSystem.grid.getRect();
                            
                            if (layout.x < rect.x) {
                                layout.width = layout.width - (rect.x - layout.x);
                                layout.x = rect.x;
                            }

                            if (layout.x + layout.width > rect.x + rect.width) {
                                layout.width = rect.x + rect.width - layout.x;
                            }

                            if (layout.width < 0) layout.width = 0;

                            if (layout.y > rect.y + rect.height) {
                                layout.height = layout.height - (rect.y + rect.height - layout.y);
                                layout.y = rect.y + rect.height;
                            }

                            var absY = (rect.y + rect.height) - layout.y;

                            if (absY + Math.abs(layout.height) + 65 > rect.y + rect.height) {
                                layout.height = -(rect.y + rect.height - 65 - absY);
                            }

                            if (layout.height > 0) layout.height = 0;

                        }
                    });
                });
            }
            
const data = getData();
chart.setOption({
    xAxis: [
      {
      	splitNumber: 24,
        scale: false,
        min, 
        max,
        type: "time",
        axisLabel: {
          formatter(value) {
            return moment(value).format("HH");
          }
        }
      }
    ],
    yAxis: [
      {
        type: "value"
      }
    ],
    series: [
      {
        data,
        type:'bar',
      }
    ]
  });

[jonavila]

@suremicro No need to go the custom chart route. I’ve solved this using a similar solution to yours but instead of creating a custom chart, I update each bar’s layout properties. You can update each bar’s layout by registering a layout function before initializing your chart.

Example:

echarts.registerLayout(myCustomLayoutFunction);
echarts.init(myChartContainer);

function myCustomLayoutFunction(ecModel) {
  ecModel.eachSeries(seriesComponent => {
    const data = seriesComponent.getData();
    data.each(idx => {
      const layout = data.getItemLayout(idx);
      
      if (layout) {
        const newLayout = echarts.graphic.clipRectByRect(
          layout,
          seriesComponent.coordinateSystem.grid.getRect(),
        );

        if (newLayout) {
          ({ x: layout.x, y: layout.y, width: layout.width, height: layout.height } = newLayout);
        }  
      }
    });
  }
}

I use this technique of registering layout functions for my charts quite often to do things like dynamically showing or hiding series labels depending if they fit.