echarts [Bug] barMinHeight is always showing last stacked series even if value is zero

irtuqstp 于 6个月前发布在 Echarts

关注(0)|答案(9)|浏览(80)

Version

5.4.3

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?code=PYBwLglsB2AEC8sDeAoWszGAG0iAXMmuhgE4QDmFApqYQOQCGAHhAM70A0x6xAvt3QVyAE0KoSsbNQBmYBgGYApFx6xyFABbzY9ACwrBJAEbAwmALaLDagMYwwjCNAAyjY9WyEwpAK7V-I2YAQVY2QgBtNQlJDABPEGoGW0YwagpgUjjVWNgRVMZI-gBZGC5dABV_cvoAdWoRGorNXxqAMXIagGVU7t9oegBdI0kWdgqIWwBrcTVR7EpoWogwTTcPLzJ_Odg-NT30YeI40PZI6J2wBKTdADdGbGr94iP0NloIanDYKMkYyWgjAsN3oABEIKRqLYwDlYldEgxjIxSLDJEjSMsRKsGAA2AAMNlybEc0wYFicAxGJmRxWcAAlqJRtIQ9FT0PlHJE8ZxYABWABMPP5eO5sAUClZYoAnKLxaL-cLBvsqf8SIDgQxwZDofzUSR4SD0Xr0OjMdjdPjCbFiYxSbpyc5jbB0bToAymTpWTsOYUfqKBUKRTzxZKFDLgwp5YrnocUHwANxAA&renderer=svg

Steps to Reproduce

options:

option = {
  tooltip: {
    trigger: 'axis',
    
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Direct',
      type: 'bar',
      barWidth: '60%',
      stack: 'main',
      barMinHeight: 4,
      data: [0, 52, 200, 334, 390, 330, 220]
    },
    {
      name: 'Direct2',
      type: 'bar',
      barWidth: '60%',
      stack: 'main',
      barMinHeight: 4,
      data: [0, 52, 200, 334, 390, 330, 220]
    }
  ]
};

Current Behavior

see on Monday is showing the green bar even though Monday has zero 0 values

Expected Behavior

if value is zero, no need for barMinHeight

Environment

- OS: Mac
- Browser: chrome
- Framework: Vue

Any additional comments?

No response

echarts

来源：https://github.com/apache/echarts/issues/20197

9条答案

按热度按时间

13z8s7eq1#

Monday has 0 values

赞(0）回复(0）举报 6个月前

disho6za2#

if you want to 'see' zero value, then do not use barMinHeight

赞(0）回复(0）举报 6个月前

1tu0hz3e3#

let's say I have values stacked of 1000 and 1, the one will not be seen.
but sometimes a zero value appears in other columns

@helgasoft , that was not an answer I expected

赞(0）回复(0）举报 6个月前

1cklez4t4#

let's say I have values stacked of 1000 and 1, the one will not be seen.

All small values will be seen if barMinHeight is set. That's the purpose of it. Demo

赞(0）回复(0）举报 6个月前

kzmpq1sx5#

This confuses users to believe there is a value while its zero (on Monday in the example)
if it is zero, don't show, if it is small, use barMinHeight

赞(0）回复(0）举报 6个月前

k3bvogb16#

if it is zero, don't show, if it is small, use barMinHeight

then use color function - Demo .

赞(0）回复(0）举报 6个月前

b09cbbtk7#

nice, but still it works only on the last declaration.

see this example (I changed the demo you sent me)

itemStyle= {color: cc => {return (cc.value==0) ? 'transparent' : cc.color; }};
option = {
  tooltip: { trigger: 'axis' }, legend:{},
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed'],
      axisTick: { alignWithLabel: true }
    }
  ],
  yAxis: {},
  series: [
    {
      name: 'Direct',
      type: 'bar',
      stack: 'main', 
      barMinHeight: 4,
      data: [0, 100, 1],
      label:itemStyle
    },
    {
      name: 'Direct2',
      type: 'bar',
      stack: 'main', 
      barMinHeight: 4,
      data: [0, 52, 1000], 
      label: itemStyle
    }
  ]
};

赞(0）回复(0）举报 6个月前

lvjbypge8#

We have critical bug, if it help... 🙏

see deferent cases:

itemStyle= {color: cc => {return (cc.value==0) ? 'transparent' : cc.color; }};

option = {
  tooltip: { trigger: 'axis' }, legend:{},
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed'],
      axisTick: { alignWithLabel: true }
    }
  ],
  yAxis: {},
  // works
  // series: [
  //   {
  //     name: 'Direct',
  //     type: 'bar',
  //     stack: 'main', 
  //     barMinHeight: 4,
  //     data: [0, 52, 1000],
  //     label:{show:true}, itemStyle
  //   },
  //   {
  //     name: 'Direct2',
  //     type: 'bar',
  //     stack: 'main', 
  //     barMinHeight: 4,
  //     data: [0, 52, 1], 
  //     label:{show:true}, itemStyle
  //   }
  // ],
  
  // doesn't work (small value not on last series)
  series: [
    {
      name: 'Direct',
      type: 'bar',
      stack: 'main', 
      barMinHeight: 4,
      data: [0, 52, 1],
      label:{show:true}, itemStyle
    },
    {
      name: 'Direct2',
      type: 'bar',
      stack: 'main', 
      barMinHeight: 4,
      data: [0, 52, 1000], 
      label:{show:true}, itemStyle
    }
  ],
  
  // works (reverse series)
  // series: [

  //   {
  //     name: 'Direct2',
  //     type: 'bar',
  //     stack: 'main', 
  //     barMinHeight: 4,
  //     data: [0, 52, 1000], 
  //     label:{show:true}, itemStyle
  //   },
  //   {
  //     name: 'Direct',
  //     type: 'bar',
  //     stack: 'main', 
  //     barMinHeight: 4,
  //     data: [0, 52, 1],
  //     label:{show:true}, itemStyle
  //   },
  // ]
  
};

赞(0）回复(0）举报 6个月前

dy2hfwbg9#

that's a known bug, still not fixed, see #16565 and #17005
works properly in versions V5.2.2 and below

赞(0）回复(0）举报 6个月前

我来回答

echarts [Bug] barMinHeight is always showing last stacked series even if value is zero

Version

Link to Minimal Reproduction

Steps to Reproduce

Current Behavior

Expected Behavior

Environment

Any additional comments?

9条答案

相关问题

热门标签

最新问答